从包含角度材料复选框的div溢出中删除不必要的滚动条

Question

如果我使用包含4 * <input type="checkbox">的div构建一个html片段并设置overflow-y: auto和max-height: 250px;，我会得到无滚动条的预期行为。但是，如果我用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，那么滚动条会出现一些问题。一个“解决方法”是将容器的内部宽度设置为大于父容器，之后通过将父容器设置为隐藏溢出来“剪切”滚动条。如果您希望它总是100％的大小，那么您可以将内部容器设置为calc（100 + 20px）。在这种情况下，0px是滚动条宽度。希望这会帮助你。