How can I make children of flex-column evenly fill all available height?

March 28, 2022

Bootstrap has a class flex-fill which you can use one a series of siblings under a flex-row to force them to evenly fill the entire width of the row, ie. they will all be the same width if their content isn’t too large for that.

I’d like for the same behavior but in the vertical direction, ie. a flex-column. However, Bootstrap doesn’t seem to support the same flex behavior for flex-column‘s. I tried both flex-fill and flex-grow-1 but neither seems to have any effect. If you inspect the following snippet, you can see the two columns have the same height, but the 4 high column isn’t growing to fill the remaining space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
  <div class="flex-column">
    <div class="flex-fill border border-dark">1/8</div>
    <div class="flex-fill border border-dark">2/8</div>
    <div class="flex-fill border border-dark">3/8</div>
    <div class="flex-fill border border-dark">4/8</div>
    <div class="flex-fill border border-dark">5/8</div>
    <div class="flex-fill border border-dark">6/8</div>
    <div class="flex-fill border border-dark">7/8</div>
    <div class="flex-fill border border-dark">8/8</div>
  </div>
  <div class="flex-column">
    <div class="flex-fill border border-dark">1/4</div>
    <div class="flex-fill border border-dark">2/4</div>
    <div class="flex-fill border border-dark">3/4</div>
    <div class="flex-fill border border-dark">4/4</div>
  </div>
</div>

I assume Bootstrap doesn’t natively support this, but what would the normal flexbox syntax be to get them to all evenly fill the available height in this way?

>Solution :

Just use d-flex on the columns to set their display property. It’s not inherited.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-column">
    <div class="flex-fill border border-dark">1/8</div>
    <div class="flex-fill border border-dark">2/8</div>
    <div class="flex-fill border border-dark">3/8</div>
    <div class="flex-fill border border-dark">4/8</div>
    <div class="flex-fill border border-dark">5/8</div>
    <div class="flex-fill border border-dark">6/8</div>
    <div class="flex-fill border border-dark">7/8</div>
    <div class="flex-fill border border-dark">8/8</div>
  </div>
  
  <div class="d-flex flex-column">
    <div class="flex-fill border border-dark">1/4</div>
    <div class="flex-fill border border-dark">2/4</div>
    <div class="flex-fill border border-dark">3/4</div>
    <div class="flex-fill border border-dark">4/4</div>
  </div>
</div>