带内边距且设置max-height的容器内实现可滚动列表的技术问题

我完全懂你的痛点——手动计算滚动区域的max-height真的太不灵活了，后续只要外层的固定区域（比如你用padding模拟的部分）尺寸一变，代码就得跟着改，维护起来特别闹心。其实用Flexbox布局就能完美解决这个问题，不需要任何硬编码的高度计算。

核心思路 #

把外层的.fixed容器设置为垂直方向的Flex布局，让滚动的列表自动占满容器除了固定内容（这里是上下padding）之外的剩余空间。这样不管外层的padding怎么变，滚动区域都会自动适配，超出高度就显示滚动条。

修改后的代码 #

CSS部分

.container { margin: 50px; }
.fixed { 
  background-color: lime; 
  padding: 20px 0;
  max-height: 200px;
  /* 添加Flex布局配置 */
  display: flex;
  flex-direction: column;
}
.scroll { 
  background-color: red; 
  overflow-y: auto;
  /* 让滚动区域占满剩余空间 */
  flex: 1;
}
li { height: 60px; }

HTML部分（无需修改，保持原有嵌套结构即可）

<div class="container">
  <div class="fixed">
    <ul class="scroll">
      <li>现在可以正常滚动啦！</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
      <li>Line 5</li>
      <li>Line 6</li>
    </ul>
  </div>
</div>

为什么这个方案有效 #

• display: flex; flex-direction: column; 让.fixed容器内的元素垂直排列
• flex: 1 告诉.scroll元素："你要占满容器里所有剩下的可用空间"
• 因为.fixed有max-height限制，当列表内容超出剩余空间时，overflow-y: auto就会自动触发滚动条，完全不需要手动计算高度

这样一来，后续不管你调整.fixed的padding、或者添加其他固定高度的元素，滚动区域都会自动适配，再也不用操心高度计算的问题了。

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