使flex-direction: column的子元素height: 100%生效的办法

Posted chen8840

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使flex-direction: column的子元素height: 100%生效的办法相关的知识，希望对你有一定的参考价值。

在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .height-500-px {
        height: 500px;
    }
    .height-100-per {
        height: 100%;
    }
    .bg-gray {
        background: gray;
    }
    .bg-yellow {
        background: yellow;
    }
    .flex-column {
        display: flex;
        flex-direction: column;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    </style>
</head>
<body>
    <div class="flex-column height-500-px bg-gray">
        <div class="flex-grow-1">
            <div class="height-100-per bg-yellow"></div>
        </div>
    </div>
</body>
</html>

技术分享图片

解决办法是在flex-grow-1这一层再加一个flex row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .height-500-px {
        height: 500px;
    }
    .height-100-per {
        height: 100%;
    }
    .bg-gray {
        background: gray;
    }
    .bg-yellow {
        background: yellow;
    }
    .bg-blue {
        background: blue;
    }
    .flex-column {
        display: flex;
        flex-direction: column;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    .flex-column-row {
        display: flex;
        flex-direction: row;
    }
    </style>
</head>
<body>
    <div class="flex-column height-500-px bg-gray">
        <div class="flex-grow-1 flex-column-row">
            <!-- 注意不要加height:100% -->
            <div class="bg-yellow flex-grow-1 height-100-per"></div>
        </div>
        <div class="flex-grow-1 flex-column-row">
            <div class="bg-blue flex-grow-1"></div>
        </div>
        <div class="flex-grow-1 flex-column-row">
            <div class="flex-grow-1">
                <!-- 里面一层加height:100%是可以的 -->
                <div class="bg-yellow height-100-per"></div>
            </div>
        </div>
    </div>
</body>
</html>

技术分享图片

从以上情况可以大致推测

flex-column子元素的height:100%会优先于flow布局来计算高度，所以直接在flex-column子元素设height:100%没有效果，因为在计算height:100%的时候，高度为0

以上是关于使flex-direction: column的子元素height: 100%生效的办法的主要内容，如果未能解决你的问题，请参考以下文章

flex部局 API

Internet Explorer 不会使用 flex-direction: column 展开 flexbox

当 flex-direction 为 column 时，divs 占据所有可用宽度。如何防止这种情况？ [复制]

不能为 Label 元素的子元素设置样式

flex布局

Flex-direction 列使 flex 项目重叠 IE11