Прокладка прокрутки и переполнения в Microsoft Edge

Question

Что я хочу для .wrapper, чтобы иметь 76px из padding в нижней части элемента. Почему не .wrapperpadding-bottom собственность, уважаемая в Microsoft Edge?

Есть ли исправление для этого, которое не связано с margin на последнем ребенке?

.wrapper { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: red; 
 
    overflow-y: scroll; 
 
    padding-bottom: 76px; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
</div>

Answer 1

Это не проблема Microsoft Гурт один, Firefox имеет ту же issue

В качестве временного решения, дают padding-bottom в детском контейнере.

.wrapper { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: red; 
 
    overflow-y: scroll; 
 
    box-sizing: border-box; 
 
} 
 
.wrapper_inner { 
 
    padding-bottom: 76px; 
 
}

<div class="wrapper"> 
 
    <div class="wrapper_inner"> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    <div class="wrapper__thing">Test</div> 
 
    </div> 
 
</div>