当使用 Flexbox 布局（flex-direction: column）且 main 区域设为 flex: 1 时，若页面无 footer 元素，textarea 所在容器可能因内联元素默认基线对齐行为产生额外底部空白，触发垂直滚动条——根本原因在于 默认为 inline-block 元素。

当使用 flexbox 布局（`flex-direction: column`）且 `main` 区域设为 `flex: 1` 时，若页面无 `footer` 元素，`textarea` 所在容器可能因内联元素默认基线对齐行为产生额外底部空白，触发垂直滚动条——根本原因在于 `` 默认为 `inline-block` 元素。

在基于 Flexbox 的全高布局中（如 body { display: flex; flex-direction: column; height: 100vh; }），常见模式是让

和

占据固有高度，

占满剩余空间（通过 flex: 1）。此时若

内部使用嵌套 Flex 布局排列多个区域（例如左右并列的 容器），一个看似微小的结构变化——<strong>移除 <footer></footer></strong>——却会意外触发垂直滚动条，而保留 <footer> 时一切正常。这一现象常令人困惑，但其根源并非 Flexbox 本身缺陷，而是 HTML 表单元素的默认渲染特性。</footer>

关键在于： 在规范中属于 <strong>replaced element</strong>，且浏览器默认将其 display 值设为 inline-block（而非 block）。作为 inline-block 元素，它会参与行内格式化上下文（IFC），遵循基线（baseline）对齐规则，并在其下方预留用于容纳下行字母（如 g, y, p）的<strong>字体下降空间（descender space）</strong>。即使父容器设置了 height: 100%，该隐式空白仍会撑开容器高度，导致内容总高度略微超过可用空间，从而触发滚动条。

值得注意的是，

的存在与否对此影响较小，因为它的高度固定且位于顶部；而

的缺失会改变 main 元素的 flex 剩余空间计算逻辑——当 footer 存在时，main 的高度被严格约束在 header 与 footer 之间；一旦 footer 移除，main 获得全部剩余高度，此时 textarea 的 descender 空白便从“被压缩隐藏”变为“可被视觉感知”，进而暴露滚动问题。

✅ 正确且推荐的修复方式是显式重置 的显示模式：

textarea {
  display: block; /* 关键修复：脱离 inline formatting context */
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  resize: none;
}

该方案直接消除基线对齐带来的副作用，语义清晰、兼容性好（支持所有现代浏览器及 IE9+），且不影响其他样式逻辑。

⚠️ 其他非推荐方案（如在父容器上设置 font-size: 0 或 line-height: 0）虽能临时抑制空白，但存在明显缺陷：

• 会干扰子元素中其他文本内容的渲染；
• 违反 CSS 层叠与继承的设计原则；
• 在响应式或组件化场景中难以维护；
• 可能引发可访问性问题（如屏幕阅读器行为异常）。

? 总结：
Flexbox 布局中的“幽灵滚动条”问题，本质是 inline-block 元素在弹性容器中未被正确归一化所致。开发者应养成对表单控件（尤其是 、<input type="image"> 等 replaced elements）显式声明 display: block 的习惯。这不仅解决滚动条异常，也提升布局的确定性与可预测性——在构建健壮的全屏应用界面时，这类细节正是专业性的体现。