mat-checkbox引发容器垂直滚动条：成因及临时修复验证

问题场景 #

使用以下代码时，带overflow-y:auto的容器会莫名出现垂直滚动条：

<div style="overflow-y:auto">
    <mat-checkbox>Some checkbox</mat-checkbox>
</div>

手动给mat-checkbox设置比实际高度大4px的固定高度后，滚动条就消失了：

<div style="overflow-y:auto">
    <mat-checkbox style="height:44px">Some checkbox</mat-checkbox>
</div>

原因分析 #

这本质是**外边距溢出（Margin Collapse）**导致的问题：

• Angular Material的mat-checkbox组件默认带有上下外边距，而容器没有触发BFC（块格式化上下文）时，子元素的外边距会“溢出”到容器外部。
• 浏览器计算容器的可滚动高度时，会把这些溢出的外边距算进内容高度里，导致容器内容高度超过自身高度，从而触发垂直滚动条。
• 给mat-checkbox设置固定高度后，组件的外边距被包含在自身高度范围内，容器不会被溢出的边距撑开，滚动条自然消失。

解决办法 #

直接调整布局规则，避免外边距溢出即可，推荐以下两种更可靠的方式：

1. 给容器触发BFC

通过给容器添加display:flow-root属性，让容器强制包含子元素的外边距，不会出现溢出：

<div style="overflow-y:auto; display:flow-root">
    <mat-checkbox>Some checkbox</mat-checkbox>
</div>

2. 移除mat-checkbox的默认外边距

直接覆盖组件的默认外边距，避免边距溢出：

<div style="overflow-y:auto">
    <mat-checkbox style="margin:0">Some checkbox</mat-checkbox>
</div>

内容的提问来源于stack exchange，提问作者Johannes Schacht