具有最大高度的父类中的垂直div

Question

所以我试着制作一个最大高度的盒子/div，其中包含两个垂直的可滚动的项目列表，根据项目的数量调整它们的高度，同时仍然符合父母的最大高度。示例。如果它们都有溢出的项目，我希望这两个列表都有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;
   }
}

Answer 1

希望这能解决你的问题。

<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;
  }
  
  .child-wrap:nth-child(1) {
     max-height: 50%; 
  }
  
  .child-wrap:nth-child(2) {
    flex: 1; 
  }

Answer 2

我觉得你不需要屈服。

​

/*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>

​