带max-height的父容器内双垂直可滚动列表的自适应高度实现咨询

嘿，我来帮你搞定这个双滚动列表的需求！你的基础flex布局方向是对的，只需要调整几个关键属性就能完美实现你要的两种场景。下面是具体的优化方案：

核心思路 #

利用Flex布局的flex属性结合min-height来实现自适应逻辑：

• 当单个列表内容未溢出时，它会自适应内容高度，另一个列表自动占据父容器剩余空间
• 当两个列表内容都溢出时，两者平分父容器的最大高度，各自独立滚动

优化后的代码 #

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); 
  gap: 1rem; /* 可选：给两个列表之间加个间距，提升视觉体验 */

  .list-1, .list-2 { 
    flex: 1 1 auto; /* 允许扩展/收缩，基础高度由内容决定 */
    min-height: 0; /* 核心：解除flex子元素的最小高度限制，让内容溢出时能被压缩 */
    overflow-y: auto; 
    padding: 0.5rem; /* 可选：给列表加内边距，避免内容贴边 */
  }

  ul {
    margin: 0;
    padding-left: 1.5rem; /* 修正ul默认内边距，保持排版整齐 */
  }
}

关键属性详解 #

1. flex: 1 1 auto：

   • flex-grow: 1：当父容器有剩余空间时，列表会自动扩展占据空间
   • flex-shrink: 1：当父容器空间不足时，列表会自动收缩
   • flex-basis: auto：列表的基础高度由自身内容决定，内容少的时候不会被强制拉伸

2. min-height: 0：
   Flex布局中垂直方向的子元素默认min-height: auto，这会导致内容溢出时子元素不会被压缩，直接撑破父容器。设置为0后，子元素可以被压缩到小于内容高度，此时overflow-y: auto就会生效，自动显示滚动条。

3. 场景验证：

   • 单列表溢出：比如list-2内容更多，list-1会自适应内容高度，list-2占据剩余空间并滚动
   • 双列表溢出：两个列表内容都超过父容器高度的50%时，会自动平分父容器高度，各自独立滚动

内容的提问来源于stack exchange，提问作者Bilguutei