高度在絕對Flexbox的容器的柔性產品

我具有以下簡單的HTML代碼段溢出隱藏物品，其具有不同的結果在Chrome和Safari高度在絕對Flexbox的容器的柔性產品

<body> 
    <div id="1" style="position: absolute; display: flex; flex-direction: column; /* height: 78px; */"> 
    <div id="2" style="height: 100%; display: flex; flex-direction: column;"> 
     <div id="3" style="position: relative; overflow: hidden;"> 
     <p><span>CSS</span></p> 
     </div> 
    </div> 
</div>

的內容被完全地顯示在瀏覽器，而在Safari，#3高度爲0。

如果我這樣做的以下

一個設置明確的高度#1
上#2
刪除height: 100%上#3
刪除overflow:hidden上#1或#2

刪除

在Safari中正確計算所有元素的高度。這可能是Safari的Flexbox的一個問題，但不確定是什麼觸發器。

來源

2017-02-03 Rebornix

如果#2是列方向的柔性容器，則#3是一個具有垂直內嵌軸的柔性物品。若要得到#3在瀏覽器中取得父母–的全部高度，那麼它不會自動發生–只需給#3此規則：flex: 1或height: 100%。

來源

2017-02-03 19:38:02

感謝您的回覆。我嘗試了你在＃3上提到的兩條規則，但它們在Safari中不起作用。 – Rebornix

我讀了很多關於Flexbox的答案，並且在回覆之前真的很期待你的回答:)'＃2'被設置爲'height：100％'，它依靠＃1的高度，而＃ 1'是絕對定位的，沒有'height'設置，我想'＃1'會嘗試使用內容高度，對嗎？ – Rebornix

瀏覽器行爲可能會有所不同。在子級上使用百分比高度時，在父級上指定高度總是比較安全。 https://jsfiddle.net/3jtr3h9e/ –

高度在絕對Flexbox的容器的柔性產品

回答

相關問題