HTML/CSS代码编辑器布局异常求助：无法实现预期滚动布局

想要实现的效果：

需求要点：

• 垂直滚动条需包含在最外层父div中
• 水平滚动仅作用于蓝色代码区域td，且其位置不依赖父div内的垂直位置

现有代码：

HTML代码 #

<html>
<body>
<div class="main_layout_element code">
  <table class="code-editor">
    <tr>
      <td>
        <div class="line-numbers">
          <span class="line-number"></span>
          !autogenerated line number objects here!
        </div>
      </td>
      <td>
        <div contenteditable="true" class="code-area" spellcheck="false">
          !a lot of code here!
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

CSS代码 #

.code {
  border: 1px solid red;
  font-family: monospace;
  overflow: hidden auto;
}
.line-numbers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: orange;
  user-select: none;
}
.line-number {
  counter-increment: linenumber;
}
.line-number::before {
  content: counter(linenumber);
  display: inline-block;
  width: 24px;
  text-align: right;
  background: orange;
  padding-right: 4px;
  padding-left: 4px;
}

.code-editor, .code-editor tr, .code-editor td {
  padding: 0;
  margin: 0;
  vertical-align: top;
}
.code-editor .code-area {
  display: block;
  flex: auto;
  white-space: pre;
  overflow: auto hidden;
}

当前问题：表格被代码区内容拉伸，未出现预期的水平滚动条。

核心是分离垂直/水平滚动的作用域，同时限制表格不被内容撑开：

1. 调整外层容器样式 #

给最外层.code设置固定高度（或最大高度），仅开启垂直滚动，并用flex布局让内部表格自适应高度：

.code {
  border: 1px solid red;
  font-family: monospace;
  overflow-y: auto; /* 仅处理垂直滚动 */
  height: 400px; /* 可根据需求调整，也可使用max-height */
  display: flex;
}

2. 固定表格布局 #

设置表格为固定布局，给行号列指定固定宽度，避免被内容撑开：

.code-editor {
  width: 100%;
  table-layout: fixed; /* 固定表格布局 */
  border-collapse: collapse;
}
/* 行号列固定宽度 */
.code-editor td:first-child {
  width: 32px; /* 匹配行号元素的宽度+内边距 */
  padding: 0;
}
/* 代码区域td开启水平滚动 */
.code-editor td:last-child {
  overflow-x: auto;
  padding: 0;
}

3. 调整代码区域样式 #

去掉flex属性，设置最小宽度确保内容过长时触发父容器水平滚动：

.code-editor .code-area {
  display: block;
  white-space: pre;
  min-width: 100%; /* 内容过长时触发水平滚动 */
}

4. 行号容器跟随垂直滚动 #

让行号容器占满高度，确保垂直滚动时与代码区域同步：

.line-numbers {
  display: flex;
  flex-direction: column;
  background: orange;
  user-select: none;
  height: 100%;
}

完整修复后CSS代码 #

.code {
  border: 1px solid red;
  font-family: monospace;
  overflow-y: auto;
  height: 400px;
  display: flex;
}
.line-numbers {
  display: flex;
  flex-direction: column;
  background: orange;
  user-select: none;
  height: 100%;
}
.line-number {
  counter-increment: linenumber;
}
.line-number::before {
  content: counter(linenumber);
  display: inline-block;
  width: 24px;
  text-align: right;
  background: orange;
  padding-right: 4px;
  padding-left: 4px;
}

.code-editor, .code-editor tr {
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.code-editor td {
  padding: 0;
  margin: 0;
  vertical-align: top;
}
.code-editor td:first-child {
  width: 32px;
}
.code-editor td:last-child {
  overflow-x: auto;
}
.code-editor .code-area {
  display: block;
  white-space: pre;
  min-width: 100%;
}

修复说明 #

• 外层.code仅处理垂直滚动，行号与代码区域同步跟随垂直滚动
• 表格固定布局避免被内容撑开，行号列宽度固定
• 代码区域td单独处理水平滚动，滚动条位置不受垂直滚动影响

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