当使用 Flexbox 布局（flex-direction: column）且 main 区域设为 flex: 1 时，若页面无 footer 元素，textarea 所在容器可能因内联元素默认基线对齐行为产生额外底部空白，触发垂直滚动条——根本原因在于 默认为 inline-block 元素。
当使用 flexbox 布局（`flex-direction: column`）且 `main` 区域设为 `flex: 1` 时，若页面无 `footer` 元素，`textarea` 所在容器可能因内联元素默认基线对齐行为产生额外底部空白，触发垂直滚动条——根本原因在于 `
在基于 Flexbox 的全高布局中（如 body { display: flex; flex-direction: column; height: 100vh; }），常见模式是让
关键在于：
值得注意的是，
✅ 正确且推荐的修复方式是显式重置 ：
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 元素在弹性容器中未被正确归一化所致。开发者应养成对表单控件（尤其是
