我无法通过简单的任务解决问题:
- 容器宽度为 100%,但有 padding-right 和 box-sizing 溢出
- 容器是弹性行
- 容器有两个具有动态内容的子容器
- 第一个孩子有内容的大小
- 第二个孩子占据剩余的宽度
预期结果:
iPad 结果:
例子是https://codepen.io/anon/pen/zaMwvr https://codepen.io/anon/pen/zaMwvr
#wrap {
width: 100%;
border: 1px dashed orangered;
box-sizing: border-box;
padding-right: 300px;
position: relative;
}
#padding-view {
width: 300px;
position: absolute;
background: coral;
right: 0;
height: 100%;
}
#flex {
display: flex;
}
<div id="wrap">
<div id="padding-view"></div>
<div id="flex">
<div id="dynamic">LALALCALCULATEDDYNAMICLY</div>
<div id="rest">{Long text here}</div>
</div>
</div>
尝试添加flex-shrink: 0
or min-width: auto
to .dynamic
(修改后的代码笔 https://codepen.io/anon/pen/eKQGKd).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)