當方向列的柔性容器中的父級柔性基礎設置時，父級高度未達到父級高度的柔性項的孩子

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屬性的255pxflex-basis。由於我沒有在.container上指定flex-direction，因此它默認爲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，真相就出來了！

希望能幫到:)