前言

问题描述

最近在做页面排版时，利用flex布局，出现一个有意思的问题。

以上是一个最基础的布局之一，在父元素高度固定的情况下，需要在子元素1固定的同时，让子元素2将剩下的内容占据填充。

基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent_div{
            height: 300px;
            display: flex;
            flex-direction: column;
            background-color: #ccc;
        }
        .child_div_1{
            height: 40px;
            background-color: yellow;
        }
        .child_div_2{
            flex: 1;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="parent_div">
        <div class="child_div_1">
            div1
        </div>
        <div class="child_div_2">
            div2
        </div>
    </div>
</body>
</html>

很简单的一串h5标记语言。但有意思的来了。试着一直往child\_div\_2中加入内容。

左侧为flex：1默认状态下的均摊div盒子高度效果，右侧为填充内容效果。

很好奇为什么会出现这种效果？原本已经被均摊的盒子高度，为什么还会超出？

flex特性

flex: 1 的作用：

flex-grow: 1: 子元素将尝试占据父容器中所有可用的空间（在主轴方向上）。
flex-shrink: 1: 当父容器缩小时，子元素的尺寸会缩小。
flex-basis: 0%: 子元素的初始主轴尺寸被设定为 0，这使得 flex-grow 和 flex-shrink 能够工作。

子元素高度的默认行为:

在 Flexbox 布局中，子元素的高度通常由内容决定，即使设置了 flex: 1，如果内容的高度超出了默认高度，子元素的高度会随内容变化。

解决方案

为了确保子元素的高度在使用 flex: 1 时不受内容高度变化的影响，可以通过设置 height: 0

<style>
       ……
        .child_div_2{
            flex: 1;
            height: 0;    //增加该处
            background-color: red;
        }
    ……
    </style>