Make flex item full width after it’s been wrapped without using media queries

Question

You can not do that. But you can get pretty close.

Just set the grow on the flex item to a huge value (9999) and grow on the wrap item to 1

 .flexContainer {
    display:flex;
    flex-wrap:wrap;
    border: 1px solid;
  }
  .img {
    width:110px;
    height:110px;
    background:red;
  }
  .flexItem {
    flex-basis:200px;
    flex-grow:9999;
    background:#ff1;
  }
  .wrapItem {
    flex-basis:100px;
    flex-grow:1;
    background:#aab;
  }

  <body>
    <div class="flexContainer">
      <div class="img">fixed size img here</div>
      <div class="flexItem">This flexes</div>
      <div class="wrapItem">This wraps</div>
    </div>
  </body>

Leave a Comment Cancel reply