[英]Vertical divs in a parent with max-height
所以我試圖制作一個最大高度的盒子/div,其中包含2個垂直可滾動的項目列表,這些列表根據項目的數量調整它們的高度,同時仍然適合父母的最大高度。 例子。 如果他們兩個都有溢出的項目,我希望兩個列表都有 50% 的高度。 示例 2 。 抱歉,如果這聽起來有點神秘且難以理解,很難描述它。
這是我目前擁有的。
HTML:
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
SASS:
.list-box {
display: flex;
flex-direction: column;
max-height: calc(100vh - 15rem);
.list-1,
.list-2 {
height: auto;
overflow-y: auto;
}
}
希望這能解決您的問題。
HTML
<div class="parent-wrap">
<div class="child-wrap"></div>
<div class="child-wrap"></div>
<div>
CSS
.parent-wrap {
height: 100%;
border: 1px solid;
height:600px;
padding: 3px;
display flex;
flex-direction: column;
}
.child-wrap {
border: 1px solid red;
overflow: auto;
max-height: 50%;
}
我認為你不需要彎曲。
/*CSS:*/ * { box-sizing: border-box; }.list-box { height: 500px; border: solid green; }.list-1, .list-2 { overflow: auto; max-height: 50%; }.list-1 { border: solid red; }.list-2 { border: solid blue; }
<!-- HTML --> <div class="list-box"> <div class="list-1"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> <div class="list-2"> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.