Div with 100% height overflows to flexbox row below its parent

Question

I have a series of elements inside a flexbox array. Each element contains a "card", which varies in height. When I try to get the cards to occupy the remaining space of the flexbox child element they inhabit, they overflow into the element in the row below. If I specify that all flex-children are 100% height, their height actually collapses into the size of the card inside them.

#flex_parent {
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  box-sizing: border-box;
  margin-bottom: 1em;
  width: 50%;
}

.full-height {
  height: 100%;
  background: #99F !important;
}

.child-description {
  height: 100%;
}


/* cosmetic */

body {
  background: black;
  color: white;
}

h4 {
  color: red;
}

.flex-child {
  border: 1px dotted red;
}

.child-card {
  background: #FFA;
  color: #000;
}

<body>
  <div id="flex_parent">
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
  </div>
</body>

The cards in blue are 100% height. They literally are 100% the height of their parent, but this means that they overflow.

How do I get them to just expand to the bottom of their parent instead?

Nidhin Joseph · Accepted Answer · 2019-10-11T05:08:09.323

Use flex for .flex-child and then add flex-grow: 1; to the child class.

Adding flex-grow: 1; when flex-direction: column; will force the element to occupy the remaining height of the container.

#flex_parent {
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.child-description {
  height: 100%;
}


/* cosmetic */

body {
  background: black;
  color: white;
}

h4 {
  color: red;
}

.flex-child {
  border: 1px dotted red;
}

.child-card {
  background: #FFA;
  color: #000;
  flex-grow: 1;
}

.full-height {
  background: #99F !important;
}

<div id="flex_parent">
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
</div>

Thank you, that works perfectly. – Eamon Bohan Oct 15 '19 at 18:39 — Eamon Bohan, Oct 15 '19 at 18:39

Div with 100% height overflows to flexbox row below its parent

1 Answers1