Question

男孩的头衔是满口的。让我解释一下我的困惑：

我有一个flex-container和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。由于我没有在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容器具有高度。从等式中移除min-height，.item-1，flex-basis 255px，仍然没有高度。但是，.item-2可能具有基于其内容的高度。就我而言，确实如此。从等式中删除.item-2表明.item-1根本没有设置高度，它只是从其他元素接收它。一旦我切换flex-direction: column，真相就出来了！

希望有所帮助：）

当父方在方向列的弹性容器中设置了flex-basis时，flex-item的子节点不占父节点的高度

1 个答案: