Can't understand why the #inner element only has its height when #main gets the display:flex rule.
This is my code:
#main {
display: flex
}
#wrapper {
background-color: violet
}
.content {
font-size: 2em
}
#inner {
min-height: 50%;
background-color: green
}
<div id="main">
<div id="wrapper">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div id="inner"></div>
</div>
</div>
If I remove display: flex the rule #inner has a height equal to 0:
#main {
/* display: flex */
}
#wrapper {
background-color: violet
}
.content {
font-size: 2em
}
#inner {
min-height: 50%;
background-color: green
}
<div id="main">
<div id="wrapper">
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div id="inner"></div>
</div>
</div>
And one more thing.
When #inner has some content inside, its height will be accumulated to the #main height.
Look at the screenshot
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You are facing the result of
stretchalignment related to flexbox. By default, flex items are stretched, so the following applies:So
min-heightwith percentage is working. Doesn't work if I change alignment and keepdisplay:flex#main { display: flex } #wrapper { background-color: violet; align-self:flex-start; } .content { font-size: 2em } #inner { min-height: 50%; background-color: green }