使用Angular Material Grid List时如何避免出现水平滚动条

问题原因 #

水平滚动条出现的核心原因是mat-grid-list的总宽度计算超出了父容器的可视宽度，常见触发场景包括：

• 盒模型默认是content-box，gutterSize的边距会额外叠加到内容宽度上，导致整体宽度溢出
• 固定rowHeight设置过大，和你给组件设置的高度不匹配，间接撑宽容器
• mat-grid-tile内部内容宽度超出 tile 本身的宽度，没有做溢出隐藏

解决方法 #

你可以按下面的步骤逐一排查调整：

1. 统一盒模型，避免边距叠加溢出
   在组件的样式文件中添加以下代码：

mat-grid-list, mat-grid-tile {
  box-sizing: border-box;
}
/* 父容器也可以加上统一盒模型的规则 */
:host {
  box-sizing: border-box;
}

2. 控制横向溢出，隐藏多余的横向内容
   给mat-grid-list添加横向溢出隐藏规则，如果需要垂直滚动可以单独开启：

mat-grid-list {
  width: 100%;
  overflow-x: hidden;
  /* 如需固定高度开启垂直滚动，加上下面两行 */
  max-height: 200px;
  overflow-y: auto;
}

3. 调整rowHeight配置，避免固定值过高溢出
   你当前设置的rowHeight="650px"是固定行高，如果你给组件设置的总高度只有200px以上，固定行高会导致整体高度溢出，你可以改成自适应配置：

<!-- 改成比例，宽高比2:1 -->
<mat-grid-list cols="4" rowHeight="2:1" gutterSize="10px">
<!-- 或者改成fit模式，自适应内容高度 -->
<mat-grid-list cols="4" rowHeight="fit" gutterSize="10px">

4. 响应式调整列数，避免小屏宽度不足
   如果是在小屏设备上出现横向滚动，可以通过媒体查询动态调整cols的数值，小屏场景下减少列数即可。

内容的提问来源于stack exchange，提问作者Arturo olmos