收件箱布局开发需求：实现等高并排可独立滚动的两个div

没问题，我帮你搞定这个收件箱风格的双栏布局，完全满足你的需求：父容器不滚动，两个子div水平并排且各自独立滚动，同时占满剩余高度。下面是完整的可运行代码和关键细节解释：

<!-- 完整实现代码 -->
<div style="height: 100vh; margin: 0; overflow: hidden; display: flex; align-items: stretch;">
  <!-- 左侧栏 -->
  <div style="flex-grow: 1; background-color: #e9ecef; overflow: auto; padding: 1rem;">
    <p>左侧内容区域</p>
    <!-- 模拟大量内容触发滚动 -->
    <p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p>
  </div>
  <!-- 右侧栏 -->
  <div style="flex-grow: 1; background-color: #f8f9fa; overflow: auto; padding: 1rem;">
    <p>右侧内容区域</p>
    <!-- 模拟大量内容触发滚动 -->
    <p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p><p>内容行</p>
  </div>
</div>

关键细节解释： #

• 父容器设置：

  • height: 100vh：让父容器占满整个浏览器视口高度，确保子栏能“填满剩余高度”
  • overflow: hidden：禁止父容器出现滚动条，保证只有子栏独立滚动
  • display: flex：开启弹性布局，让两个子栏横向排列
  • align-items: stretch：默认值，确保子栏自动拉伸填满父容器的高度

• 子栏设置：

  • flex-grow: 1：让两个子栏平分父容器的可用宽度（如果需要固定某栏宽度，把这个换成width: 300px之类的数值即可）
  • overflow: auto：只有当子栏内容超出高度时才显示滚动条，比overflow: scroll更美观（不会一直显示空滚动条）
  • 额外加了padding是为了优化内容的视觉间距，你可以根据需求调整

这样实现的布局就和你想要的收件箱样式完全一致了，左右栏可以各自独立滚动，父容器保持静止。

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