获得徽章 0
在 Flex 容器中，当一个元素被设置为 flex: 1 1 0%（或 flex-grow: 1）时，它会根据 Flex 容器的剩余空间被分配一个明确的高度。虽然这个高度没有通过 height 属性显式写出，但在浏览器完成布局计算后，它实际上已经拥有了一个精确的像素高度。
例如下面这个简单的结构：
html
<div style="display: flex; flex-direction: column; height: 400px;">
<div style="flex: 1;"> <!-- 这个 div 会被拉伸到 400px 减去其他项的高度 -->
...
</div>
</div>
经过 Flex 布局计算后，flex: 1 的 div 会得到一个明确的高度值（比如 380px），此时它已经是一个“高度确定”的容器，其内部子元素使用百分比高度时，就可以以这个计算后的高度为参照。
例如下面这个简单的结构：
html
<div style="display: flex; flex-direction: column; height: 400px;">
<div style="flex: 1;"> <!-- 这个 div 会被拉伸到 400px 减去其他项的高度 -->
...
</div>
</div>
经过 Flex 布局计算后，flex: 1 的 div 会得到一个明确的高度值（比如 380px），此时它已经是一个“高度确定”的容器，其内部子元素使用百分比高度时，就可以以这个计算后的高度为参照。
展开
评论
点赞
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
![[吃瓜群众]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_10.42a731c.png)