How to make child divs same height as flex parent

Question

I need three child divs to have the same height as each other and as a parent div. The content of one div is set to change on user interaction, and any change in height resulting from this should drive the height of the parent or other children or both. I thought this was possible with flex.

I've tried to implement answers given to identical questions, but no luck so far. Can anyone spot what I'm doing wrong? I'm using Firefox and don't need this to work in other browsers for this prototype version, but of course it will save time later if it does.

I have tried 'position: absolute' and 'display: table' approaches at length with no joy. Would really like the flex approach, anyway.

div#filterRow {
  min-height: 80px;
  display: flex;
  border: 2px solid red;
}

div#filterRow div.selectHolder {
  border: 2px solid blue;
  border-right: 0;
  flex: auto;
  height: 100%;
  padding: 10px;
}

div#filterRow div.selectHolder div {
  vertical-align: top;
}

div#filterRow div.selectHolder:last-child {
  border-right: 1px solid lightgray;
}

div#filterRow div h1 {
  margin: 0;
  margin-bottom: 10px;
}

div#filterRow div div {
  margin-right: 5px;
}

div#filterRow div#filters {
  width: 800px;
}

div#filterRow div#highlight {
  width: 300px;
}

div#filterRow div#granularity {
  width: 400px;
}

div.fullwidth {
  width: 100%;
}

<div class="fullwidth  dispTR" id="filterRow">

  <div class="selectHolder" id="filters">
    <h1>Filters longer to make tall</h1>
  </div>
  <div class="selectHolder" id="highlight">
    <h1>Highlight</h1>
  </div>
  <div class="selectHolder" id="granularity">
    <h1>Group</h1>
  </div>
</div>

Example here: https://jsfiddle.net/rt80wd6r/2/

Grateful for any help. I'm sure it's something obvious.

Here are the other questions:

HTML5 flexible box model height calculation

make div's height expand with its content

hungerstar · Accepted Answer · 2017-05-02T16:54:55.100

The child elements of a display: flex; element will take up the height of the parent by default. So no need for height: 100%; or similar.

div#filterRow {
  min-height: 80px;
  display: flex;
  border: 2px solid red;
}

div#filterRow div.selectHolder {
  border: 2px solid blue;
  border-right: 0;
  padding: 10px;
}

div#filterRow div.selectHolder div {
  vertical-align: top;
}

div#filterRow div.selectHolder:last-child {
  border-right: 1px solid lightgray;
}

div#filterRow div h1 {
  margin: 0;
  margin-bottom: 10px;
}

div#filterRow div div {
  margin-right: 5px;
}

div#filterRow div#filters {
  width: 800px;
}

div#filterRow div#highlight {
  width: 300px;
}

div#filterRow div#granularity {
  width: 400px;
}

div.fullwidth {
  width: 100%;
}

<div class="dispTR" id="filterRow">

  <div class="selectHolder" id="filters">
    <h2>Filters longer to make tall</h2>
    <p>
      Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel.
    </p>
  </div>
  <div class="selectHolder" id="highlight">
    <h2>Highlight</h2>
  </div>
  <div class="selectHolder" id="granularity">
    <h2>Group</h2>
  </div>
  
</div>

Thank you! I can't believe how long I spent on that and how simple the fix was! — emma, May 03 '17 at 08:01

smerg · Answer 2 · 2017-05-02T16:57:10.107

Use align-items: stretch on the flex container, and remove the explicit height in the child items (height: 100%).

https://jsfiddle.net/rt80wd6r/3/

FYI the way flex works is that it provides 2 axes for aligning your items, by default horizontal and vertical (but can be flipped to having vertical being the first one and horizontal being the second).

The 1st axis is set with justify-content and the second is set with align-items - so in this case, we want to stretch items on the vertical axis, so we use align-items.

edit: The other answer mentions that align-items: stretch is already set by default so you should accept that one as it's more optimal.

Thank you for your answer and explanation. I was sorry not to be able to accept both! — emma, May 03 '17 at 08:02

How to make child divs same height as flex parent

2 Answers2