Make children full height of parent flex box css

Question

I am trying to make the children elements occupy full height of the parent div. I've tried various approaches as per other answers on stack overflow but nothing seems to work.

I've tried setting align-items: stretch to parent, align-self: stretch to children, height: 100% to children. What am I missing?

HTML

<div class="parent">   
  <div class="child blue">
    content...
  </div>
  <div class="child red">
      content...
  </div>
  <div class="child yellow">
      content...
  </div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.child {
  display: flex;
  height: 100%;
  align-self: stretch;
}

Fiddle example: https://jsfiddle.net/f8zxc4go/

mahan · Accepted Answer · 2022-05-06T07:11:03.113

Do these 3 things for .child:

Remove height: 100%
Remove align-items: stretch
Use flex-grow: 1

And remove align-items: stretch; and flex-direction:row; from .parent too.

.parent {
  display: flex;
  /* flex-direction: row; */
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch; */
}

.child {
  display: flex;
  /*  height: 100%; */
  
  flex-grow: 1; /* NEW */
  
  width: 25%;
  /*  align-self: stretch; */
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
      this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child red">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
      this is some content
    </p>
  </div>
</div>

Reference:

flex-grow: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

You may find this answer also helpful.

The flexbox approach: https://stackoverflow.com/a/24979148

zer00ne · Answer 2 · 2022-05-06T07:05:00.993

Instead of height: 100% use min-height: 100%.

In the example below the top row has .child {min-height:100%}
The second row has .orphan {height: 100%} as was the OP's.

Note: If viewed in full screen, the content will have enough room to spread out evenly. In order to see the difference between both rows resize the window to a smaller size or add more text to some or all columns.

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.child {
  display: flex;
  min-height: 100%;
  align-self: stretch;
}

.orphan {
  display: flex;
  height: 100%;
  align-self: stretch;
}

section:first-child {
  background: blue;
  color: gold
}

section:nth-child(2) {
  background: gold;
  color: blue;
}

section:nth-child(3) {
  background: red;
  color: white
}

section:last-child {
  background: green;
  color: white
}

<main class='parent'>
  <section class='child'>
    My sister died in the spaghetti. Your special time is your power. It makes you strong like a boob. I going to daughter your brains out, bitch. Who cares, Morty? Global acts of terrorism happen every day. Uh, here's something that's never happened before—I'm
    a pickle! I'm Pickle Ri-i-i-ick!
  </section>
  <section class='child'>
    Flip the pickle over. Rick, is this a Saw thing? Are you seriously Sawing the Vindicators? Is he keeping his shoulders square? Oooooooh he's tryin'! And that's why I always say 'Shumshumschilpiddydah!'
  </section>
  <section class='child'>
    I'm Mr. Crowbar, and here is my friend, who is also a crowbar! It's called carpe diem Morty. Look it up. What about the reality where Hitler cured cancer, Morty? The answer is: Don't think about it. 5 more minute of this and I'm going to get mad!
  </section>
  <section class='child'>
    Yeah, sure, I mean, if you spend all day shuffling words around, you can make anything sound bad. I was just killing some snaked up here like everyone else, I guess, and finishing the Christmas lights. You're growing up fast, Morty. You're going into
    a great big thorn straight into my ass. Pluto's a planet.
  </section>
</main>

<hr>

<div class='parent'>
  <section class='orphan'>
    My sister died in the spaghetti. Your special time is your power. It makes you strong like a boob. I going to daughter your brains out, bitch. Who cares, Morty? Global acts of terrorism happen every day. Uh, here's something that's never happened before—I'm
    a pickle! I'm Pickle Ri-i-i-ick!
  </section>
  <section class='orphan'>
    Flip the pickle over. Rick, is this a Saw thing? Are you seriously Sawing the Vindicators? Is he keeping his shoulders square? Oooooooh he's tryin'! And that's why I always say 'Shumshumschilpiddydah!'
  </section>
  <section class='orphan'>
    I'm Mr. Crowbar, and here is my friend, who is also a crowbar! It's called carpe diem Morty. Look it up. What about the reality where Hitler cured cancer, Morty? The answer is: Don't think about it. 5 more minute of this and I'm going to get mad!
  </section>
  <section class='orphan'>
    Yeah, sure, I mean, if you spend all day shuffling words around, you can make anything sound bad. I was just killing some snaked up here like everyone else, I guess, and finishing the Christmas lights. You're growing up fast, Morty. You're going into
    a great big thorn straight into my ass. Pluto's a planet.
  </section>
</div>

score 0 · Answer 3 · answered May 06 '22 at 07:15

You on the right direction. Only two small changes. You can do it if you remove the height from child class and change align-self: stretch; to align-items: stretch;.

.child {
  display: flex;  
  width: 25%;
  align-items: stretch;
}

.parent {
  display: flex;
  flex-direction: row;
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch;  remove. not necessary */ 
}

.child {
  display: flex;  
  width: 25%;
  align-items: stretch;
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
    this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child red">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
    this is some content
    </p>
  </div>
</div>

Make children full height of parent flex box css

3 Answers3

Reference: