html - 嵌套的弹性盒高度与最大高度
问题描述
更新:我在 Chrome 72 上看到了这种奇怪的行为。FireFox 64 没问题!
我对嵌套的 flexbox 有疑问。
在下面的片段中,我添加了一个虚拟 XL 高度到,因此当有许多项目超出可用最大高度.root.container
时,结果正是我想要的。
相反,当项目很少时,.root.container
不应扩展到所有可用高度。
换句话说,我希望.root.container
高度为auto
,但我不知道如何。
移除它的虚拟高度,溢出被触发.root.content
而不是.sub.content
.
请帮助我了解 flexbox 在这种特殊情况下是如何工作的。
PS小提琴也可以在这里找到
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
div {
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
max-height: 100%;
overflow: auto;
}
.root.container {
background-color: red;
max-height: 100%;
height: 999999px; /* i want height to be 'auto' */
}
.sub.container {
background-color: purple;
height: 100%;
}
.root.header {
background-color: lightblue;
}
.sub.header {
background-color: lightgreen;
}
.root.content {
background-color: yellow;
}
.sub.content {
background-color: orange;
}
<div class="root container">
<div class="root header">header</div>
<div class="root content">
<div class="sub container">
<div class="sub header">menu</div>
<div class="sub content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div>
</div>
解决方案
设置大高度时,您的代码按预期工作,因为max-height:100%
在子元素中需要引用,如果您删除高度,max-height
则将无法自动。附带说明一下,即使您删除 Firefox 也会有相同的输出,max-height
因此问题与max-height
. 1
相反,您可以保留级联 flex 容器并依靠默认的拉伸对齐来获得您想要的:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
div {
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
max-height: 100%;
overflow: auto;
}
.root.container {
background-color: red;
max-height: 100%;
}
.sub.container {
background-color: purple;
width:100%; /*added this*/
}
.root.header {
background-color: lightblue;
}
.sub.header {
background-color: lightgreen;
}
.root.content {
background-color: yellow;
display:flex; /*added this*/
}
.sub.content {
background-color: orange;
}
<div class="root container">
<div class="root header">header</div>
<div class="root content">
<div class="sub container">
<div class="sub header">menu</div>
<div class="sub content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div>
</div>
为了更好地查看问题,让我们删除一些属性并仅保留将触发不同行为的所需属性:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
div {
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow: auto;
}
.root.container {
background-color: red;
max-height: 100%;
}
.sub.container {
background-color: purple;
height: 100%;
}
.root.header {
background-color: lightblue;
}
.sub.header {
background-color: lightgreen;
}
.root.content {
background-color: yellow;
}
.sub.content {
background-color: orange;
}
<div class="root container">
<div class="root header">header</div>
<div class="root content">
<div class="sub container">
<div class="sub header">menu</div>
<div class="sub content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div>
</div>
所有问题都height:100%
与.sub.container
. 从技术上讲,考虑到规范,这个高度应该失败,auto
因为没有设置父高度,但是 Firefox 似乎能够评估这个高度。可能是由于嵌套的 flex 容器,我们可以在知道内容之前评估父高度,或者只是一个错误。
Chrome 没有这样做,只是忽略了高度,这是合乎逻辑的行为。
推荐阅读
- r - 在两个数组之间找到一个函数,以最小化对之间的距离
- php - apache error.log 中的“[notice] child pid XXXX exit signal Segmentation fault (11)”
- iphone - 如何在我的案例研究中以非编程方式向标签和文本视图添加约束?
- awk - 在打印输出之前对变量进行操作
- java - 在java中反转一个字符串程序,在这个错误中遇到了麻烦
- .htaccess - htaccess 多个顶级域和 http 到 https 与 www
- r - 将具有不规则项的 1 级列表转换为数据框
- unity3d - 我可以存储子游戏对象的本地轴并在运行时将其转换为世界轴吗?
- amazon-web-services - 重复的 AWS EC2 自动扩展
- swift - SWIFT:从文本字段格式化为日期不起作用