如何停止弹性框项目的增长

Question

我想让最下面的物品停止增长。我希望右下方的flexbox项仅是其内容的高度（与display: inline-block;一样）。

网格和网格项目具有：

display: flex;
align-items: stretch;
flex-wrap: wrap

请参阅所附图片：

Answer 1

您应该在底部元素周围创建另一个容器。

<div class="container"> /* This container will be grown by Flex*/
    <div class="grey-box"> /* This container will remain the same height as its children */
        /* content */
    </div>
</div>

并且您必须将以下属性应用于.container div：

.container {
    justify-content: center;
    align-items: center;
    align-content: center;
}

带有适当的前缀。