I have a div with two elements that I want to stack horizontally. Div#C has fixed width, and div#B will fill up the rest of the space. However the contents of div#B might be fixed width (which is dynamic) or 100% width (of div#B).
The effect I want is, if the screen width is small enough such that, right before div#B and div#C start to overlap or if the width of div#B is small enough, I want div#B and div#C to stack vertically, and each have width 100% of div#A. The problem is if I use a media query, I have to give a fixed min width for it to stack horizontally. With a fixed width, it doesn't account for any fixed width content in div#B. Does anyone know how to fix this preferably only in CSS?
#A {
display:flex;
}
#B {
flex:1;
}
#C {
width:300px
}
<div id="A">
<div id="B">b</div>
<div id="C">c</div>
</div>
Best Answer
Although I had initially thought this might not be possible there is one option I can think of.
Give
div#B
a ridiculousflex-grow
value in comparison and givediv#C
justflex:1 0 300px
Codepen Demo
When
div#B
eventually shrinks small enough to force wrapping, theflex-grow:1
ondiv#C
wil cause it to expand to full width and the 'upper'div#B
will now take up the full width also since it cannot expand past 100% width of that 'row'