フレックスボックスを応答性にするには？

Question

私は横に積み重ねたい2つの要素を持つ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を垂直に積み重ねるには、767pxや992pxのようなブレークポイントを設定します。

Answer 2

私は当初これが可能でないかもしれないと考えていましたが、私が考えることのできるオプションが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>

Codepen Demo

div#Bは、最終的にラッピングを強制するのに十分小さく縮小、div#Cウィル上flex-grow:1因果全幅に展開することをEと「アッパー」div#Bは、今ではその「行」