Flex-grow无法扩展block__column_2 div至屏幕底部的问题咨询

你的核心错误是把flex-grow:1加错了元素：

• block__row是flex容器（display:flex），它的直接子元素是.block__column，只有这些子元素才能使用flex属性（比如flex-grow）分配容器的剩余空间。
• 但你把block__column_2类加在了内部的.block__item上，这个元素并非flex容器的直接子项，因此flex-grow对它完全不起作用。

另外还有两个影响布局的细节问题：

1. 要让元素撑满屏幕高度，需给html和body设置高度，否则.wrapper的height:100%没有参照基准。
2. 你给block__row设置了固定height:1024px，如果要适配屏幕高度，建议改用min-height:100vh（基于视口高度的单位）。

修正后的代码 #

index.html（调整类的位置） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="block">
            <div class="block__row">
                <div class="block__column block__column_1">
                    <div class="block__item">1</div>
                </div>
                <!-- 把block__column_2类移到父级的block__column上 -->
                <div class="block__column block__column_2">
                    <div class="block__item">2
                        <br>Более высокий блок
                    </div>
                </div>
                <div class="block__column block__column_3">
                    <div class="block__item">3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css（补充高度基准+修正flex属性） #

/* 给html和body设置高度，让wrapper的100%有参照 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper{
    height: 100%;
    overflow: hidden;
    min-height: 100%;
    padding: 50px;
    box-sizing: border-box; /* 防止padding撑大元素 */
}

body{
    font-family: Arial, Helvetica, sans-serif;
}
    
.block__row{
    border: 20px solid #ece89d;
    margin: 0px 0px 20px 0px;
    display: flex;
    flex-direction: column;
    /* 改用100%继承wrapper高度，或用100vh适配视口 */
    height: 100%;
    align-items: stretch;       
}

.block__column{
    border: 20px solid #5e5373;
}

.block__column_1{}
/* 现在flex-grow作用在flex容器的直接子项上 */
.block__column_2{  
    flex-grow: 1;
    flex-basis: auto; 
}
.block__column_3{}

.block__item{
    background-color: #18b5a4;
    padding: 50px;
    font-size: 50px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    /* 可选：让block__item也撑满column的高度 */
    height: 100%;
    box-sizing: border-box;
}

关键说明 #

1. flex属性的作用对象：只有flex容器的直接子元素才能使用flex-grow/flex-shrink/flex-basis属性，务必确认元素层级。
2. 高度基准问题：使用百分比高度时，必须确保父级元素有明确的高度值，否则百分比会失效；100vh是直接基于视口高度的单位，适合全屏布局需求。
3. box-sizing: border-box：防止padding和border把元素撑大超出预期尺寸，是布局中常用的基础属性。

内容的提问来源于stack exchange，提问作者Nikita