CSS父div占满100%高度时子UL无法自适应收缩滚动问题

写法失效核心有3个：

• .some-area 只配置了flex-direction: column但未设置display: flex，本身不是纵向flex容器，内部元素无法按flex规则分配空间
• flex布局下子项默认属性为min-height: auto，不管是外层的.some-area还是内部的ul，默认都会被自身内容撑开，不会主动收缩适配父容器高度
• 直接给ul设置height: 100%的计算基准是父容器总高度，没有扣除h5标题已经占用的高度，会导致整体内容溢出，滚动逻辑异常

不需要修改HTML结构，仅调整CSS规则即可：

1. 给.some-area补上display: flex让它成为纵向flex容器，同时添加min-height: 0，允许它作为外层flex容器的子项时自动收缩
2. 删除ul上的内联样式style="height: 100%; overflow: scroll"，新增ul的样式规则：设置flex: 1让ul自动占据h5标题之外的所有剩余空间，添加min-height: 0允许ul自身收缩，设置overflow-y: auto实现内容溢出时才显示纵向滚动条，避免常驻滚动条影响样式

<style>
/* 外层容器保留原有配置即可 */
.fill-height-or-more {
  height: 100vh;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
/* 修正后的.some-area规则 */
.some-area {
  flex: 1;
  /* 补全flex容器声明 */
  display: flex;
  flex-direction: column;
  /* 内容溢出场景下建议改justify-content为flex-start，否则顶部标题会被推出可视区 */
  justify-content: flex-start;
  padding: 1rem;
  /* 允许flex子项收缩 */
  min-height: 0;
  /* 原有自定义样式保留，比如背景、虚线边框 */
  border: 1px dashed #ccc;
  /* 固定盒模型，避免padding撑大容器总高度 */
  box-sizing: border-box;
}
/* 新增ul自适应规则 */
.some-area ul {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 可选：清除列表默认边距，避免高度计算偏差 */
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
}
.some-area h5 {
  /* 可选：清除标题默认边距，避免高度计算偏差 */
  margin: 0;
}
</style>

<section class="fill-height-or-more">
  <div class="some-area">
    <h5>区块1标题</h5>
    <ul>
      <li>列表测试项</li>
      <!-- 可追加大量列表项测试溢出滚动效果 -->
    </ul>
  </div>
  <div class="some-area">
    <h5>区块2标题</h5>
    <ul>
      <li>列表测试项</li>
    </ul>
  </div>
  <div class="some-area">
    <h5>区块3标题</h5>
    <ul>
      <li>列表测试项</li>
    </ul>
  </div>
  <div class="some-area">
    <h5>区块4标题</h5>
    <ul>
      <li>列表测试项</li>
    </ul>
  </div>
</section>

注意：全局建议统一配置* { box-sizing: border-box; }，可以避免所有盒模型padding、border撑大容器的问题，减少布局高度计算偏差。

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