padding bottom not working in firefox & IE11

Question

JsFiddle

CSS

body, html {
  background: violet
}
* {
  margin: 0;
  padding: 0
}
.fixed {
  height: 100%;
  width: 300px;
  background: #fff;
  right: 0;
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-left: 1px solid red;
}
.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red
}

I have tried this above code in both Chrome & Firefox browser. I have attached two screenshots also. I want to know why padding-bottom:60px is not working in Firefox. But, its working fine in Chrome browser. Also not working in IE11

In Chrome Browser (Working Fine) :

In Firefox Browser (Padding Bottom not working. WHY?) :

Really I don't understand this..

Answer 1

There are alot of reasons told by alot of experts like overflow property causes this or display:flex handles padding a bit differently if you search for a reason. @Temani Afif is correct and corrected me as well and here is a recent bug noted with the overflow-y:scroll or overflow-y:auto not taking padding-bottom into account.

https://bugzilla.mozilla.org/show_bug.cgi?id=1417667

For a quick solution what you can do is instead of applying the bottom padding on the flex item which has the overflow-y property set, apply it on the item's pseudo element of after eg

.container {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 30px 60px 0 60px;
}

.container:after {
  content:'';
  display:block;
  padding-bottom:30px;
}

Hope this helps you and all others out.

Answer 2

This occurs because the overflow-y: auto; rule. Try this CSS

.container {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;  /* This rule affect the padding-bottom, quit it and see the results */
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red;
  margin-top: 60px; /* This rule add the effect you want */
}

EDIT

Theoretically the padding-bottom is there, but when you apply an overflow-y:auto; the scroll bar occupate all space available.

If you don't want add a margin-top: 60px; you can try this new CSS:

.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
}
.container p {
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red;
}

UPDATE

Or try this solution:

.container {
    overflow-y: auto;
    padding: 30px 60px;
}
.container p {
    padding: 0 0 60px 0;
}