htmlcssflexbox

Make a column take up available space in a flex container with wrap

I have a layout like this:

.container {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
}

.col-x {
  flex: 0 0 5rem;
  background-color: red;
}

.col-y {
  flex: 1 0 auto;
  background-color: green;
}
<div class="container">
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
</div>

  1. Container width is variable
  2. col-x is fixed width
  3. col-y should should take up the remaining space so that col-x always starts at a new row

col-y is not taking up the full available width with "flex: 1 0 auto". If I set the width of col-y to 100% it wraps to a new row, which is not what I want.

See: https://codepen.io/saurabh0/pen/GgRxVja

Solution

  • The 2 columns layout can be easily achieved using CSS grid:

    .container {
  background-color: yellow;
  display: grid;
  grid-template-columns: auto 1fr;
}

.col-x {
  width: 5rem;
  background-color: red;
}

.col-y {
  background-color: green;
}
    <div class="container">
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
</div>

    If you must use a flexbox, set the width of .col-y with calc(100% - 5rem) (100% - .col-x width):

    .container {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
}

.col-x {
  width: 5rem;
  background-color: red;
}

.col-y {
  width: calc(100% - 5rem);
  background-color: green;
}
    <div class="container">
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
  <div class="col-x">X</div>
  <div class="col-y">Y</div>
</div>