无法理解为什么 #inner 元素只有在 #main 得到 display:flex 规则时才具有其高度。
这是我的代码：
#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>
如果我删除 display: flex 规则 #inner 的高度等于 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>
还有一件事。
当 #inner 内部有一些内容时，其高度将被累加为 #main 高度。
看一下截图
您面临的是与flexbox相关的
stretch对齐的结果。默认情况下，弹性项目会被拉伸，因此以下内容适用：因此，带有百分比的
min-height正在工作。如果更改对齐方式并保留display:flex，则不起作用#main { display: flex } #wrapper { background-color: violet; align-self:flex-start; } .content { font-size: 2em } #inner { min-height: 50%; background-color: green }