我在頁面中間放置了一個模態 div，其最大高度定義為其容器的百分比，在這種情況下，它不應超過頁面高度的 70%。
div的內容是兩個元素：
- 一個固定高度的標題 div
- 和一個可變高度的內容 div
我希望模態與內容一起增長，直到最大高度，然后內容 div 應該開始滾動。但是無論我做什么，內容似乎都像這樣從模態中溢位：
這是我的標記和樣式：
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
max-height: 70%;
border: 5px dashed green;
border-radius: 5px;
}
.container {
/* I cannot remove this container */
display: flex;
flex-direction: column;
width: 600px;
}
.header {
flex: none;
background: red;
height: 100px;
}
.content {
flex: 1;
background: yellow;
overflow: auto;
}
.big-stuff {
margin: 10px;
background: orange;
height: 600px;
}<div class="modal">
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content. Should shrink or grow to fit content but only to a max of the container height
<div class="big-stuff">
Large content
</div>
</div>
</div>
</div>不幸的是，我無法更改標記，所以我試圖通過修改 CSS 來使其正常作業。如果我洗掉 .container div，那么一切似乎都正常，但我希望有另一種方法。
此處提供完整示例：https ://codepen.io/dyancat/pen/QWaOGpB
uj5u.com熱心網友回復：
您可以將 flex 添加到模態，這樣內容就不會擴展到其父級（本例中的模態）：
.modal {
max-height: 70%;
border: 5px dashed green;
border-radius: 5px;
display: flex; /* Add this flex */
}
uj5u.com熱心網友回復：
只需將 css 中的 display:flex 添加到模態類。
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
max-height: 70%;
border: 5px dashed green;
border-radius: 5px;
display: flex;
}
.container {
/* I cannot remove this container */
display: flex;
flex-direction: column;
width: 600px;
}
.header {
flex: none;
background: red;
height: 100px;
}
.content {
flex: 1;
background: yellow;
overflow: auto;
}
.big-stuff {
margin: 10px;
background: orange;
height: 600px;
}<div class="modal">
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content. Should shrink or grow to fit content but only to a max of the container height
<div class="big-stuff">
Large content
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455022.html