当在 flex 容器中使用 且移除 footer 后出现多余垂直滚动条，根本原因是 textarea 默认为 inline-block 元素，在行内布局中保留基线对齐产生的底部间隙；设置 display: block 即可彻底解决。

当在 flex 容器中使用 `` 且移除 footer 后出现多余垂直滚动条，根本原因是 textarea 默认为 inline-block 元素，在行内布局中保留基线对齐产生的底部间隙；设置 `display: block` 即可彻底解决。

在基于 Flexbox 的全高页面布局（如 height: 100vh; display: flex; flex-direction: column）中，开发者常将

、

和

作为子元素垂直排列，并让

占据剩余空间（flex: 1）。当

内部进一步使用 display: flex 水平分割区域（例如左右两个

），并在每个

中嵌入 width: 100%; height: 100% 的 时，一个微妙但高频的问题浮现：<strong>仅移除 <footer> 就会触发浏览器显示垂直滚动条，而移除 <header> 却不会</header></footer></strong>。<p>这一现象并非 Flexbox 本身缺陷，而是源于 <textarea> 的默认显示行为——它属于 <strong>replaced element</strong>，且在规范中被定义为 display: inline-block（而非 block）。作为 inline-level 元素，它参与行盒（line box）布局，会按基线（baseline）对齐其父容器中的其他行内内容。即使父 <div> 中仅有它一个子元素，浏览器仍会为其预留用于容纳下行字母（如 g、j、y）下降部（descender）的空白空间，表现为元素底部约 3–4px 的不可见间隙。该间隙累加后超出容器高度，触发 overflow，最终呈现为滚动条。<p>值得注意的是，此问题在有 <footer> 时可能被“掩盖”：因为 <footer> 占据了底部空间，flex 主轴剩余空间计算方式发生变化，间接压缩了 <main> 的可用高度，反而使间隙未溢出；一旦移除 <footer>，<main> 被拉伸至填满全部剩余空间，此时 textarea 底部间隙便直接导致内容高度 > 容器高度。</main></footer></main></footer></footer></p> <p>✅ 正确且推荐的修复方式是<strong>显式重置 <textarea> 的显示模式：

textarea {
  display: block; /* 关键修复：脱离行内布局流 */
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  resize: none;
}

⚠️ 其他常见“修复”方案需谨慎使用：

• font-size: 0 或 line-height: 0 设于父
  ：虽能消除间隙，但会破坏继承链，影响后代文本渲染，且不符合语义化原则；
• vertical-align: top/bottom/middle：对 inline-block 有效，但不如 display: block 直接、可靠，且在复杂嵌套中易失效；
• margin-bottom: -4px 等魔法数字：属 hack 行为，缺乏可维护性，且跨浏览器表现不一致。

? 额外提示：若项目中需复用该样式，建议将 textarea { display: block; } 提升为全局基础重置规则（如纳入 CSS Reset 或 Preflight），既预防此类问题，也增强表单控件的一致性。

总结而言，该问题本质是 HTML 元素默认样式与 CSS 布局模型交互的典型示例。理解 inline-block 的布局特性，并主动控制替换元素的显示上下文，是构建健壮、可预测响应式 UI 的关键实践之一。