絕對彈性盒容器中彈性項目中溢出隱藏項目的高度
[英]Height of overflow-hidden item in flex item in absolute flexbox container
問題描述
我有以下簡單的 HTML 片段，它在 Chrome 和 Safari 中具有不同的結果
<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>
內容在 Chrome 中完美顯示，而在 Safari 中， #3 height 為0 。
如果我執行以下操作之一
- 將顯式高度設置為
#1 - 移除
height: 100%#2上的height: 100% - 刪除
overflow:hidden在#3 - 移除
disaplay:flex#1或#2
在 Safari 中正確計算所有元素的高度。 這可能是 Safari 的 Flexbox 的問題，但不確定觸發因素是什么。
1 個解決方案
解決方案1
1 2017-02-03 19:38:02
如果#2是列方向的彈性容器，那么#3是具有垂直內聯軸的彈性項目。 要讓#3獲取父級的完整高度 - 在瀏覽器中它不會自動發生 - 只需給#3這條規則： flex: 1或height: 100% 。
CSS Flexbox - 如何使彈性項目縮小以適應彈性容器？
[英]CSS Flexbox - How to make flex item shrink to fit flex container?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.