弹性盒.避免孩子身高比父母长(列方向) [英] Flexbox. Avoid child with longer height than parent (column direction)

问题描述

我正在使用 flexbox 搭建一个网站的基本 UI.与通常的电子邮件布局非常相似.

出于某种原因，列式 flexbox 容器 (.content-main, plum 颜色) 的高度比它的父级大，这是我不想要的.

我制作了一个 codepen 片段来展示这种行为.

html,身体 {宽度:100%；高度:100%；背景:浅蓝色；box-sizing: 边框框；}* {box-sizing: 边框框；}.容器 {高度:继承；背景:PeachPuff；填充:1em；显示:弹性；最大高度:500px；}.侧边栏{弹性:0 1 15%；背景:卡其色；}.内容 {弹性:1 1 自动；背景:梅花；填充:0.8em；显示:弹性；弹性方向:列；}.content-header {背景:浅绿色；填充:0.3em；弹性:0 0 7%；}.content-main {显示:弹性；背景:深海绿；填充:1em；高度:100%；弹性:1 1 自动；}.main-list {弹性:0 0 12%；背景:浅珊瑚色；}.主体 {弹性:0 1 自动；填充:1em；背景:浅青色；显示:弹性；flex-flow:行包装；溢出-y:滚动；}

<div class='sidebar'><ul><li>Onnnne</li><li>Twoo</li><li>三</li>
<div class='content'>
<span>这是内容标题</span>
<ul><li>列表1</li><li>列表2</li><li>列表3</li>
<div class='main-body'>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>

如何防止绿色孩子的身高超过其梅花父母?我希望孩子只是可滚动但永远不会比其父母高.

解决方案

Flexbox 引入 auto 作为 min-height 的新初始值.它使 flex 项目与它们的内容一样高.

您可以通过将 min-height 设置为 0(旧的初始值)来撤消该操作:

.content-main {最小高度:0；}

html,身体 {宽度:100%；高度:100%；背景:浅蓝色；box-sizing: 边框框；}* {box-sizing: 边框框；}.容器 {高度:继承；背景:PeachPuff；填充:1em；显示:弹性；最大高度:500px；}.侧边栏{弹性:0 1 15%；背景:卡其色；}.内容 {弹性:1 1 自动；背景:梅花；填充:0.8em；显示:弹性；弹性方向:列；}.content-header {背景:浅绿色；填充:0.3em；弹性:0 0 7%；}.content-main {显示:弹性；背景:深海绿；填充:1em；高度:100%；弹性:1 1 自动；最小高度:0；}.main-list {弹性:0 0 12%；背景:浅珊瑚色；}.主体 {弹性:0 1 自动；填充:1em；背景:浅青色；显示:弹性；flex-flow:行包装；溢出-y:滚动；}

<div class='sidebar'><ul><li>Onnnne</li><li>Twoo</li><li>三</li>
<div class='content'>
<span>这是内容标题</span>
<ul><li>列表1</li><li>列表2</li><li>列表3</li>
<div class='main-body'>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>
<表格><头><th>第一</th><th>第二</th><th>第三</th><th>第三</th><th>第三</th><th>第三</th></thead><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>