为何出现垂直滚动条？绝对定位布局下的9px误差及滚动条疑问

为什么会出现9px误差和滚动条？ #

核心原因是flex布局的基线对齐+内联元素的默认排版间隙：

• 你的蓝色区块是flex-direction: column的flex容器，且设置了justify-content: space-between，这会把红色区块强制推到容器底部。
• 红色区块里的文字属于内联元素，浏览器默认会给内联元素预留「基线下方的空白区域」（对应字体的下沉部分，高度大概9px，和默认字体尺寸相关）。
• 当红色区块被推到蓝色容器底部时，这部分内联文字的底部空白会超出蓝色容器的高度范围，而蓝色容器本身设置了height: 100%，主容器又是绝对定位占满视口，这一点点超出就触发了垂直滚动条。

为什么两种操作能让滚动条消失？ #

1. 移除蓝色区块的justify-content: space-between #

去掉这个属性后，红色区块会默认以flex-start对齐（贴在蓝色容器顶部），内联文字的底部空白留在蓝色容器的中间区域，不会超出容器的100%高度范围，自然不会触发滚动条。

2. 给红色区块加padding-bottom: 9px #

给红色区块加上和空白高度匹配的padding后，内联文字的底部空白被包含进红色区块的padding区域里，红色区块的整体高度刚好适配蓝色容器的底部边界，不会超出主容器的100%高度，滚动条就消失了。

内容的提问来源于stack exchange，提问作者Антон Андреев