html - 当父级在方向列的 flex 容器中设置 flex 基础时， flex 元素的子项不占用父级的高度

Question

男孩，这个头衔是满口的。让我解释一下我的困惑:

我有一个 flex 容器和 2 个 flex 元素。

<!-- HTML -->

<div class="container">
    <div class="item-1">
        <div class="child-of-item-1"></div>
    </div>
    <div class="item-2></div>
</div>


/* CSS */

.container {
    display: flex;
}

.item-1 {
    flex: 0 0 255px;
}

.item-2 {
   /* negligible css */
}

.child-of-item-1 {
    height: 100%; // shouldn't this always receive the height of its parent?
}

item-1设置为 flex-basis的 255px使用速记 flex属性(property)。因为我没有指定 flex-direction在 .container , 它默认为 row .简单的。太好了。

现在在某个屏幕宽度下，假设 992px , 我切换 flex-direction列。

@media (max-width: 992px) {
    .container {
        flex-direction: column;
    }
}

这就是我的问题所在。一次 <992px , .item-1仍然有 255px 的高度但是 .child-of-item-1完全失去它的高度。我哪里出错了？我错过了什么？

注意 .child-of-item-1 可能很重要里面没有内容，但它确实有一个 background-image .我没有看到 background-image因为.child-of-item-1失去了它的高度，因此我感到困惑。

非常感谢您提供一些见解，再次感谢! :)

Answer 1

好吧，在发现问题之前只用了 2 分钟的发布时间。父 .container 有一个 min-height，因此总是有一个高度。当 flex-direction 设置为 column 时，这并不重要，但是当设置为 row 时，flex-container 有一个高度。从等式 .item-1 中删除 min-height，他的 flex-basis 为 255px , 仍然没有高度。但是，.item-2 可能具有基于其内容的高度。就我而言，确实如此。从等式中删除 .item-2 显示 .item-1 根本没有设置高度，它只是从其他元素接收它。一旦我切换了 flex-direction: column，真相就出来了!

希望对您有所帮助:)