Html 绝对定位、百分比高度和flexbox

我想要一个最大高度的flexbox容器（比如50%的容器）。很简单吧

.container{
显示器：flex；
弯曲方向：立柱；
边框：1px纯红；
溢出：隐藏；
身高：50%；
位置：绝对位置；
}
.名单{
flex:01自动；
溢出：自动；
}
.固定{
flex:0自动；
}

标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚

规范中定义了该行为：

指定高度百分比

该百分比是根据建筑物的高度计算的 生成的框的包含块

如果未明确指定包含块的高度 （即，它取决于内容高度），而此元素不是 绝对定位，计算使用的高度时，就像

auto

was一样 指定的

因此，这里有两个要点：

当您的容器不是绝对定位的（即，它保持流动状态）时，在父容器上没有定义高度这一事实意味着

height:50%

解析为

height:auto

（内容高度）

如果设置，比如说，

body{height:100vh}

，您的容器将占据50%的高度

正文{
高度：100vh；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
边框：1px纯红；
溢出：隐藏；
身高：50%；
}
.名单{
flex:01自动；
溢出：自动；
}
.固定{
flex:0自动；
}

标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚