How to make flexbox responsive?

Question

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>

Answer 1

Although I had initially thought this might not be possible there is one option I can think of.

Give div#B a ridiculous flex-grow value in comparison and give 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 Demo

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 will now take up the full width also since it cannot expand past 100% width of that 'row'

Answer 2

Try this👇

#A {
    display:flex;
    flex-flow: row wrap;
}
#B {
    flex-basis: 60%;
}
#C {
    flex-basis: 40%;
}


@media (max-width: 540px){
   #B {
        flex-basis: 100%;
        //whatever width you want in mobile view
    }

    #c {
        flex-basis: 100%;
        //whatever width you want in mobile view
    }
}