Удалите ненужную полосу прокрутки из переполнения div, содержащего флажки углового материала

Question

Если я создаю HTML-фрагмент с div, содержащим 4 *<input type="checkbox"> и устанавливаю overflow-y: auto и max-height: 250px;, я получаю ожидаемое поведение без полосы прокрутки. Однако, если я заменяю стандартные флажки на флажки из Angular Material, я вижу полосу прокрутки, как я могу снять это и сохранить ожидаемое поведение выше?

1-й список - угловой материал, 2-й - стандартные 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 + 20 пикселей). 0px в этом случае - ширина полосы прокрутки. Надеюсь, это поможет вам.