parent 和 max-height 中的垂直 div

Question

所以我试图用 max-height 制作一个 box/div，其中包含 2 个垂直可滚动的项目列表，这些项目根据项目的数量调整它们的高度，同时仍然适合 parents' max-height。 Example. And if both of them have overflowing items I want both lists to have 50% height. 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;
   }
}

Answer 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; 
  }

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>

parent 和 max-height 中的垂直 div

Vertical divs in a parent with max-height

html

css

sass