从包含 angular material 复选框的 div 溢出中删除不必要的滚动条

Question

如果我使用包含 4*<input type="checkbox"> 的 div 构建一个 html 片段并设置 overflow-y: auto 和 max-height: 250px; 我得到预期的行为 no滚动条。但是，如果我用 Angular Material 中的标准复选框替换标准复选框，我会看到一个滚动条，我该如何删除它并保持上面的预期行为？

第一个列表是 Angular Material，第二个是标准 html 元素。

stackblitz 示例 -> https://stackblitz.com/edit/angular-69zuiy

Answer 1

@Nico 你说的对，但我们也可以通过其他方式解决。如果你添加一些像 10px 或更多的填充，那么你可以很容易地解决它。

.wrapper {
    padding: 10px 5px;
}

这种情况造就了那些物质风格....

.mat-checkbox .mat-checkbox-ripple {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    height: 40px;
    width: 40px;
    z-index: 1;
    pointer-events: none;

}

Answer 2

你用什么浏览器？例如，如果是 Firefox，则滚动条会出现一些问题。一个"work around" 设置容器的内部宽度大于父容器，然后"cut" 滚动条通过设置父容器溢出隐藏。如果您希望它始终为 100% 大小，则可以将内部容器设置为 calc(100 + 20px)。本例中的 0px 是滚动条的宽度。希望对您有所帮助。

从包含 angular material 复选框的 div 溢出中删除不必要的滚动条

Remove unnecessary scroll bar from div overflow containing angular material checkboxes

html

css

angular-material

angular-material-7