具有最大高度的父级中的垂直 div答案

【问题标题】：Vertical divs in a parent with max-height具有最大高度的父级中的垂直 div
【发布时间】：2021-12-30 13:38:20
【问题描述】：

所以我正在尝试制作一个最大高度的框/div，其中包含 2 个垂直可滚动的项目列表，这些列表根据项目的数量调整它们的高度，同时仍然适合父母的最大高度。 Example。如果他们两个都有溢出的项目，我希望两个列表都有 50% 的高度。 Example 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;
   }
}

【问题讨论】：

你试过什么代码？ A minimal reproducible example 帮助其他人开始回答您的问题。

标签： html css sass

【解决方案1】：

希望这能解决您的问题。

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

【讨论】：

感谢您的回答，这与我想要实现的目标非常接近，但有没有办法让其中一个孩子包裹完全扩展到父母的高度，如果另一个更小，而不是最大高度为 50%。
我已经更新了 CSS。现在检查。

【解决方案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>

【讨论】：