弹性项目未填充其父项的高度答案

【问题标题】：Flex items not filling the height of its parent弹性项目未填充其父项的高度
【发布时间】：2021-05-14 12:05:12
【问题描述】：

我有一个装有子项的容器：

HTML

<div id="container">
    <div className="item">1</div>
    <div className="item">2</div>
    <div className="item">3</div>
    <div className="item">4</div>
</div>

CSS

#container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    flex: 1;
    text-align: center;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

这个 flexbox 容器位于一个网格布局中，并且此处的单元格左侧的单元格包含导致此处显示的 flexbox 的高度高于内容的内容，如下所示：

我需要里面有数字的正方形来拉伸/填充其容器的高度，像这样

...但文本也垂直居中。

我尝试将 .item 的高度设置为 100%，但没有填满。是否有类似网格中用于 flexbox 的剩余空间？

【问题讨论】：

标签： css flexbox

【解决方案1】：

确保网格布局容器的高度为 100vh，并且您显示的容器的高度也为 100%。要使每个项目内的文本居中，您可以让每个项目显示：flex。

.grid-container {
    height: 100vh;
}


#container {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

【讨论】：

完美运行。谢谢！