无法理解为什么 #inner 元素只有在 #main 得到 display:flex 规则时才具有其高度。
这是我的代码：
1
830#main {
display: flex
}
#wrapper {
background-color: violet
}
.content {
font-size: 2em
}
#inner {
min-height: 50%;
background-color: green
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
如果我删除 display: flex 规则 #inner 的高度等于 0:
#main {
/* display: flex */
}
#wrapper {
background-color: violet
}
.content {
font-size: 2em
}
#inner {
min-height: 50%;
background-color: green
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
还有一件事。
当 #inner 内部有一些内容时，其高度将被累加为 #main 高度。
看一下截图
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您面临的是与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 }