问题：
Flexbox。避免子项的高度大于父项（列方向）[重复]
邹嘉石
我正在使用flexbox搭建一个网站的基本用户界面。与通常的电子邮件布局非常相似。
出于某种原因，列布局flexbox容器（.content main，梅花色）的第二个子项（class.main，lightseagreen color）比其父项的高度更高，我不希望它这样做。
我制作了一个代码笔片段来显示这种行为。
css lang-css prettyprint-override">html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}
<div class='container'>
<div class='sidebar'>
<ul>
<li>Onnnne</li>
<li>Twoo</li>
<li>Threee</li>
</ul>
</div>
<div class='content'>
<div class='content-header'>
<span>This iscontent header</span>
</div>
<div class='content-main'>
<div class='main-list'>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div class='main-body'>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>我怎样才能防止绿色的孩子比它的李子父母有更高的身高？我希望孩子只是可以滚动，但不能比父母高。
共有1个答案
丁宏浚
Flexbox引入了auto作为min height的新初始值。它使flex项目与内容一样高。
通过将min height设置为0，可以撤消该操作，旧的初始值为：
.content-main {
min-height: 0;
}
html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
min-height: 0;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}<div class='container'>
<div class='sidebar'>
<ul>
<li>Onnnne</li>
<li>Twoo</li>
<li>Threee</li>
</ul>
</div>
<div class='content'>
<div class='content-header'>
<span>This iscontent header</span>
</div>
<div class='content-main'>
<div class='main-list'>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
<div class='main-body'>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div class='panel'>
<table>
<thead>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
<th>Third</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
类似资料：
-
问题内容： 我在flexbox列上遇到了麻烦，因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查，据我了解，这只是Chrome浏览器的问题。这是我的示例： HTML CSS 我想要它，以便红色填充蓝色。为什么不起作用？ 问题答案： TL; DR： 设置为，并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理： 我从这个类似的问题中学到，根据flexb
-
我正在玩flexbox，我的flex项似乎溢出了它的父容器。我能做些什么来确保它能呆在它的范围内？ 抱歉，它有点长：） 但我正试图垂直列出一些控件，我想在一行上订购两个控件<因此，UL以一个灵活的方向（柱）和LI的方向（水平）保存所有内容 但是，即使控件嵌套在具有设置宽度的div中，它们仍然在其边缘上运行。有谁能给我一些建议，说明我应该做些什么：）<谢谢！
-
JSFIDLE 如何阻止flexbox的子项溢出容器？ 我不希望溢出设置为隐藏 超文本标记语言： CSS:
-
问题内容： 我有2个表：， 的结果应为基于中的父项的子项总和。 我尝试了很多次，但无法弄清楚。 问题答案： 使用递归CTE：
-
我正在用flexbox做实验，并创建了这个布局。我试图让中间写着“嘿”的白色方框成为父方框的90%宽度/高度，但百分比似乎不会影响它。（我把它设置为100px/100px目前工作） 这很奇怪，因为父节点在检查时有一个定义的宽度/高度。 有人能告诉我如何实现吗？（此外，对我如何使用flexbox的一般批评也很赞赏） http://jsfiddle.net/yv3Lw5gy/1/ 相关类别：
-
问题内容： 对于任何CSS专家来说，我都有一个棘手的问题。我的绿色div的高度灵活，可以容纳剩余的高度。现在我想在该div中放置一个div，该div应该是绿色div的一半。但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 HTML CSS 问题答案： 您可以绝对定位。 关于您的声明： 但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 您给了。然后给它的孩子（）一个。