Flexbox布局子元素垂直滚动条不显示问题修复

滚动条失效的核心原因是高度计算错误：

• 你给.splitter设置了height:100%，这个高度是相对于父容器body的100%视口高度计算的，但body内同时存在顶部.top元素，两个元素总高度超出视口。
• 你给html、body设置了overflow:hidden，超出视口的内容直接被裁剪，.splitter实际可见区域比它自身的100%高度小一截。
• 此时.splitter没有被约束在「视口高度减去顶部高度」的范围内，内部左右面板的overflow:scroll找不到正确的容器高度边界，自然无法触发滚动计算，溢出内容直接被父级的隐藏规则裁掉。
• 删掉顶部div后，.splitter的100%高度刚好等于视口高度，高度约束成立，滚动条就正常了。

方案1：Flex纵向布局（推荐，自适应顶部高度） #

把body改为纵向flex容器，让分割面板自动占满顶部元素剩下的所有空间，不需要手动计算高度：

<style>
  * {
    font-size: 200px;
    box-sizing: border-box;
  }

  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  /* 给body加纵向flex布局 */
  body {
    display: flex;
    flex-direction: column;
  }
  .top {
    background-color: red;
    flex-shrink: 0; /* 顶部面板不被压缩，高度随内容自适应 */
  }
  .splitter {
    display: flex;
    overflow: hidden;
    flex: 1; /* 占满除顶部外的所有剩余高度 */
    width: 100%;
    min-height: 0; /* 关键配置：覆盖flex子项默认min-height:auto，允许容器高度被约束 */
  }
  .left {
    background-color: bisque;
    overflow: scroll;
    flex: 1; /* 左右面板平分宽度，可按需调整flex比例 */
  }
  .right {
    background-color: rgb(67, 228, 62);
    overflow: scroll;
    flex: 1;
  }
</style>
<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

方案2：Calc计算固定高度 #

如果不需要顶部高度自适应，可以给顶部设置固定高度，再用calc计算分割面板的高度：

/* 仅展示需要修改的样式 */
.top {
  background-color: red;
  height: 200px; /* 顶部固定高度 */
}
.splitter {
  display: flex;
  overflow: hidden;
  height: calc(100% - 200px); /* 总高度减去顶部固定高度 */
  width: 100%;
}
.left, .right {
  flex: 1;
}

这个方案的缺点是顶部高度写死，后续修改顶部内容尺寸时需要同步修改calc的计算值，维护成本更高。

• 所有flex布局下需要内部滚动的子元素，纵向布局场景必须加min-height: 0，横向布局场景必须加min-width: 0。flex元素默认的min-height: auto/min-width: auto规则会让元素优先适配内容尺寸，无视父容器的宽高约束，直接导致滚动失效。
• 百分比高度生效的前提是父元素存在明确的、可直接计算的高度值，靠内容撑开的父元素无法给子元素提供百分比高度的计算依据。

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