Flexbox-停止flexbox项目增长

Question

基本上，我想阻止底部项目增长到高度。我希望右下方的flexbox项目只是其内容的高度（如何使用display：inline-block;）

网格和网格项目有..

var list = document.getElementById("quick-links").children[1];

请参阅附图。'let' keyword javascript reference @ Mozilla Developer network

谢谢

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;
}

通过适当的预先修复课程。