我創建了以下 html 元素。
這里remaining-height的類應該是剩余的高度，container-div它是 100 - 15 = 85px，但是因為grand-child-div是 200 px，所以remaining-heightdiv 超出了container-div.
如何防止remaining-heightdiv 的剩余高度container-div為 100 - 15 = 85px。
根據評論，我添加了一個細節。remaining-height將在該 div 內滾動，因為grand-child-div高度比remaining-height.
<div class="container-div" style="height:100px">
<div class="fixed-height">
</div>
<div class="remaining-height">
<div>
<div class="grand-child-div" style="height:200px">
</div>
</div>
</div>
</div>
以下是css
.remaining-height {
flex: 1 1 auto;
display: flex;
flex-flow: column;
background-color: yellow;
}
.fixed-height {
height: 15px;
background-color: green;
}
https://jsfiddle.net/6cg8kmqh/
uj5u.com熱心網友回復：
如評論中所述，您要做的是控制溢位。您可以添加overflow: auto以.remaining-height允許它滾動（一旦正確設定了 flex）。請參閱jsfiddle.net/4bLfvcxu。
uj5u.com熱心網友回復：
嘗試使用類添加到元素：剩余高度，height: calc(100% - 15px);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527403.html
標籤：htmlcss