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>

Solution 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'

Solution 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
    }
}

Solution 3

I think this is a simple way

.container{
        display:flex;
        flex-wrap: wrap;
      }

      .container div {
        border:1px solid #ccc;
        padding: 1em  1em;
        flex: 1;
       }

      

       

<div class="container">
  <div>
      <h4>
       First box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
         dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
  <div>
     <h4>
       Second box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
  <div>
     <h4>
       Third box
      </h4>
      <p>
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
      </p>
  </div>
</div>