CSS 弹性布局（flex）的height计算

原创已于 2022-11-08 19:37:41 修改 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

禁止复制转载，可以以页面链接方式分享转载

文章标签：

#css #前端 #css3

于 2022-11-08 19:36:43 首次发布

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文通过测试案例探讨了弹性布局中父元素与子元素高度如何相互作用，特别是当子元素设置为100%高度时，父元素如何计算其自身高度以适配子元素，并解释了display:flex属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

疑惑现象：

弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。

可能过程：

先使用子元素总高度撑起父元素高度，子元素再继承父元素高度。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="border: 2px solid black;box-sizing: border-box;">
<div style="border:2px solid red;display: flex;">
    <div style="height: auto;">
        <div style="height: 100%;border: 5px solid yellow;box-sizing: border-box;">
            <h1>1</h1>
            <input>
            <input>
            <input>
            <input>
        </div>
        <div style="height: 100%;border: 5px solid green;box-sizing: border-box;">
            <h1>2</h1>
            <input>
            <input>
            <input>
            <input>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

博文引用-启发：

由多次测试我猜测是首次渲染之后，父元素未设置高度，子元素即使设置height：100%；
获取不到父元素高度，高度由子元素的内容决定。
而dispaly:flex;弹性布局会动态计算元素的高度，在确定最大的元素高度之后，相当于父元素高度确定，再由于height: auto;的存在由浏览器计算出其他子元素的高度，最终使得各个子元素高度统一。