如何使 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>

原文由 omega 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

给予 div#B div#C flex:1 0 300px flex-grow

 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>

代码笔演示

When div#B eventually shrinks small enough to force wrapping, the flex-grow:1 on div#C wil cause it to expand to full width and the ‘upper’ div#B 现在也将占据整个宽度，因为它不能扩展到超过该“行”的 100% 宽度

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议