具有最大高度的父級中的垂直div-有解無憂

所以我試圖制作一個包含 2 個垂直可滾動專案串列的最大高度的框/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>

薩斯：

.list-box {
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 15rem);
   
   .list-1,
   .list-2 { 
      height: auto;
      overflow-y: auto;
   }
}

uj5u.com熱心網友回復：

希望這會解決您的問題。

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

uj5u.com熱心網友回復：

我認為你不需要彎曲。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398098.html

標籤：html css 蠢货

上一篇：防止填充增加大小

下一篇：使用CSS按鈕切換影像