Padding and overflow scroll in Microsoft Edge

Question

What I desire is for .wrapper to have 76px of padding at the bottom of the element. Why isn't .wrapper's padding-bottom property respected in Microsoft Edge?

Is there a fix for this that does not involve margin on the last child?

.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>

Related: http://stackoverflow.com/questions/20624938/padding-bottom-is-ignored-in-firefox-and-ie-on-overflowing-elements-with-no-cont — misterManSam, Sep 28 '16 at 01:46

score 2 · Accepted Answer · answered Sep 28 '16 at 01:46

It is not a Microsoft Edge issue alone, Firefox has the same issue

As a workaround, give the padding-bottom in the child container.

.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>

Padding and overflow scroll in Microsoft Edge

1 Answers1