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 >
<div >
content...
</div>
<div >
content...
</div>
<div >
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/
CodePudding user response：
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 >
<div >
<p>
this is some content
</p>
</div>
<div >
<p>
this is some content
</p>
<p>
this is some content
</p>
</div>
<div >
<p>
this is some content
</p>
<p>
this is some content
</p>
<p>
this is some content
</p>
</div>
<div >
<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
CodePudding user response：
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>CodePudding user response：
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 >
<div >
<p>
this is some content
</p>
</div>
<div >
<p>
this is some content
</p>
<p>
this is some content
</p>
</div>
<div >
<p>
this is some content
</p>
<p>
this is some content
</p>
<p>
this is some content
</p>
</div>
<div >
<p>
this is some content
</p>
</div>
</div>