[英]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.