我有一个包含两个元素的 div，我想水平堆叠它们。 Div#C 具有固定宽度，div#B 将填充其余空间。然而，div#B 的内容可能是固定宽度（动态）或 100% 宽度（div#B）。
我想要的效果是，如果屏幕宽度足够小，以至于在 div#B 和 div#C 开始重叠之前或者如果 div#B 的宽度足够小，我希望 div#B 和 div#C垂直堆叠，每个宽度为 div#A 的 100%。问题是，如果我使用媒体查询，我必须为其水平堆叠提供固定的最小宽度。使用固定宽度，它不考虑 div#B 中的任何固定宽度内容。有谁知道如何最好只在 CSS 中解决这个问题？
#A {
display:flex;
}
#B {
flex:1;
}
#C {
width:300px
}
<div id="A">
<div id="B">b</div>
<div id="C">c</div>
</div>
尽管我最初认为这可能不可能，但我能想到一个选择。
Give div#B一个可笑的flex-grow比较值并给出div#C just flex:1 0 300px
div {
padding: 2em;
}
#A {
padding: 0;
display: flex;
flex-wrap: wrap;
}
#B {
flex: 99;
background: pink;
}
#C {
flex: 1 0 300px;
background: orange;
}
<div id="A">
<div id="B">Lorem ipsum dolor sit amet</div>
<div id="C">c</div>
</div>
Codepen 演示 http://codepen.io/Paulie-D/pen/grErAX
When div#B最终收缩得足够小以强制包裹，flex-grow:1 on div#C会导致它扩展到全宽和“上部”div#B现在也将占据整个宽度，因为它无法扩展超过该“行”的 100% 宽度
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
