从包含角形材料复选框的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是滚动条的宽度。 希望对您有帮助。