当 flexbox 布局中移除 footer 后出现多余垂直滚动条，本质是 textarea 默认为 inline-block 元素，在行内上下文里保留基线对齐产生的底部间隙；通过设置 display: block 即可彻底消除该问题。
当 flexbox 布局中移除 footer 后出现多余垂直滚动条，本质是 textarea 默认为 inline-block 元素，在行内上下文里保留基线对齐产生的底部间隙；通过设置 `display: block` 即可彻底消除该问题。
在使用 Flexbox 构建全屏布局（如 height: 100vh; flex-direction: column）时，开发者常遇到一个看似矛盾的现象：仅移除
。该问题并非 Flexbox 本身缺陷，而是由
? 根本原因：textarea 的 inline-block 特性
HTML 中，
- 参与行内布局；
- 默认按 vertical-align: baseline 对齐；
- 在其底部预留空间以容纳下行字母（如 g, y, p 的降部），形成约 4–5px 的不可见间隙；
- 当父容器（如
）采用 flex: 1 并设为 display: flex 时，该间隙仍被计算在内，导致子元素总高度略微超出可用空间，从而触发滚动条。
⚠️ 为什么移除 footer 才触发？
因为 footer 作为 flex 项目占据固定高度，其存在会“吸收”或掩盖该微小溢出；而一旦移除，剩余空间全部分配给 main，此时 textarea 的底部间隙便直接撑破容器边界——尤其在 height: 100% 严格约束下，毫厘之差即现滚动条。✅ 推荐解决方案：强制 block 显示
最语义清晰、兼容性强且无副作用的方式是显式声明：
textarea { display: block; /* 关键修复：脱离行内上下文 */ width: 100%; height: 100%; border: 0; padding: 0; resize: none; }✅ 优势：
- 不影响文本内容渲染或用户交互；
- 无需修改父级 font-size 或 line-height（后者可能破坏其他内联内容）；
- 兼容所有现代浏览器及 IE11+；
- 符合 W3C 规范推荐实践。
❌ 不推荐的替代方案（及其风险）
方法 代码示例 风险说明 父元素设 font-size: 0 div { font-size: 0; } 会重置所有后代内联元素字号，需手动恢复子元素 font-size，易遗漏或冲突 父元素设 line-height: 0 div { line-height: 0; } 影响行高继承，可能导致文字截断或垂直错位，尤其在含多行文本时不可靠 ? 验证示例（精简版）
<body> <header>Header</header> <main> <div id="one"><textarea>Textarea 1</textarea></div> <div id="two"><textarea>Textarea 2</textarea></div> </main> <!-- footer 被注释 → 此时必须加 display: block --> </body>配合上述 CSS，即可确保无论 header/footer 是否存在，布局均稳定无滚动条。
? 总结
- 根本解法唯一且明确：textarea { display: block; }；
- 这不是 Flexbox 的 bug，而是 HTML 元素默认行为与 CSS 布局模型交互的典型案例；
- 在构建响应式、全高布局时，对表单控件（尤其是 textarea, input[type=”button”] 等 inline-block 元素）保持 display 意识，可避免大量隐性布局陷阱。
养成在 Flex 容器中对内联元素显式设置 display 的习惯，是编写健壮 CSS 的重要一步。