如何使 flexbox 响应？

Question

我有一个包含两个要水平堆叠的元素的 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>

Answer 1

虽然我最初认为这可能是不可能的，但我能想到一种选择。

给div#B一个荒谬flex-grow的比较值，并给予div#C公正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>

代码笔演示

当div#B最终收缩到足够小以强制换行时，flex-grow:1on 将div#C导致它扩展到全宽，“上”div#B现在也将占据全宽，因为它不能扩展超过该“行”的 100% 宽度

Answer 2

使用媒体查询来完成此任务。设置断点，例如 767px 或 992px，以垂直堆叠 div。