如何防止添加子元素时sec1高度增长，保持布局比例并实现滚动？

不需要给containerWithScroll设置像素高度，只要通过完整的百分比高度链+CSS滚动属性就能实现需求，具体操作如下：

1. 构建完整的百分比高度链
   确保从根容器（html、body）到sec1的所有父级容器都设置了height: 100%，或者用vh单位（如height: 100vh）作为最外层容器的高度基准，让sec1的百分比高度能正确计算。

2. 配置滚动容器样式
   给containerWithScroll设置两个核心属性：

   • height: 100%：完全继承父元素sec1的高度，保持布局比例
   • overflow-y: auto：当子元素sec1_1的内容超出容器高度时，自动显示垂直滚动条

3. 让子元素填满滚动容器
   给sec1_1设置height: 100%，使其填满containerWithScroll的高度，内容超出时就会触发滚动，而不会撑开父级sec1的高度。

示例代码 #

<!-- 最外层容器用100vh作为高度基准，替代根容器的height:100% -->
<div class="main-container" style="height: 100vh;">
  <div class="sec1" style="height: 30%; background: #eee;">
    <div class="containerWithScroll" style="height: 100%; overflow-y: auto;">
      <div class="sec1_1" style="height: 100%;">
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <p>100</p>
        <!-- 可添加更多元素，只会在containerWithScroll内滚动 -->
      </div>
    </div>
  </div>
  <div class="sec2" style="height: 40%; background: #ddd;">sec2内容</div>
  <div class="sec3" style="height: 30%; background: #ccc;">sec3内容</div>
</div>

这样设置后，sec1、sec2、sec3的布局比例始终保持，添加内容只会让containerWithScroll内部滚动，全程无需使用像素高度。

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