CSS实现子元素自适应容器高度：内容过长时滚动、过短时填充

我明白你现在的困扰——固定高度的容器里，内容区要么撑不满边界要么直接溢出，还得让行号和输入框完美对齐对吧？纯CSS完全可以搞定，咱们来一步步调整你的代码：

问题根源分析 #

你原代码的核心问题在于：

1. 容器#container没有建立正确的格式化上下文，导致#content的height:100%计算容易出现偏差
2. #content的滚动属性设置不够精准，且flex布局下子元素的高度控制逻辑有疏漏
3. 文本域的滚动权限没有完全交给父容器，导致出现布局混乱

修正后的SCSS代码 #

div#container {
  font-size: 1.25em;
  height: 8em;
  border: thin solid red;
  // 关键：让容器成为flex容器，确保子元素高度计算绝对准确
  display: flex;
  flex-direction: column;

  div#content {
    display: flex;
    flex-direction: row;
    // 关键：仅在内容超出时显示垂直滚动条，替代强制显示的scroll
    overflow-y: auto;
    // 让内容区自动占满容器的全部可用高度
    flex: 1;

    & > :is(div.line-numbers, textarea) {
      border: thick solid pink;
      height: 100%;
      font-family: monospace;
      font-size: 1em;
      line-height: 1em;
      padding: 0.5em;
      // 防止flex布局下子元素被压缩变形
      flex-shrink: 0;
    }

    & > div.line-numbers {
      white-space: pre;
      border: thin solid green;
    }

    & > textarea {
      background-color: lightyellow;
      resize: none;
      // 关键：把滚动权限完全交给父容器#content
      overflow: hidden;
      // 让文本域自动占满容器剩余宽度
      flex: 1;
    }
  }
}

对应的HTML（行号内容调整为换行显示，更贴合实际场景） #

<div id="container">
  <div id="content">
    <div class="line-numbers">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    </div>
    <textarea>
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
    </textarea>
  </div>
</div>

关键修改点解释 #

1. 容器#container设置为flex布局：
   这是最稳妥的方式，能让#content自动继承容器的全部高度，彻底避免height:100%在某些场景下的计算误差。

2. #content的滚动与高度控制：

   • 用overflow-y: auto替代overflow: scroll，只有当内容真的超出容器时才显示滚动条，视觉更整洁
   • flex:1确保内容区要么填充满容器高度，要么在内容超出时触发滚动

3. 子元素的flex属性调整：

   • flex-shrink:0防止行号和文本域在flex布局下被无端压缩
   • 文本域设置flex:1自动占满剩余宽度，同时overflow:hidden把所有滚动逻辑交给父容器#content，确保行号和输入内容同步滚动

备选方案（不用flex容器） #

如果你不想给#container用flex布局，也可以用绝对定位实现同样效果：

div#container {
  font-size: 1.25em;
  height: 8em;
  border: thin solid red;
  position: relative; // 作为子元素绝对定位的参考

  div#content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    overflow-y: auto;

    // 子元素样式和上面完全一致
  }
}

调整后你会发现：当内容高度超过容器的8em时，会自动显示垂直滚动条，内容在容器内滚动；当内容较短时，#content会自动填充满容器高度，不会出现空白。完全用纯CSS实现，不需要任何JavaScript。

内容来源于stack exchange