Flexbox padding bottom fails in Firefox and Safari

Question

When scrolling down the .parent div you should see its red background at the bottom due to the padding-bottom. This works in Chrome, but not in Safari and Firefox.

.container {
  display: flex;
  width: 200px;
  height: 500px;
}

.parent {
  display: flex;
  flex-direction: column;
  background: red;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: auto;
  flex: 1;
}

.child {
  flex: 1 0 100px;
  background: green;
  border: 1px solid blue;
}

<div class="container">
 <div class="parent">
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
  <div class="child">
   child
  </div>
 </div>
</div>

codepen: http://codepen.io/anon/pen/NpvJPY

Edit: This question is different from the proposed duplicate because it regards a problem with a fixed padding in pixels, as opposed to the percentage padding in the duplicate.

Possible duplicate of [Padding-bottom/top in flexbox layout](http://stackoverflow.com/questions/23717953/padding-bottom-top-in-flexbox-layout) — Muhammad, Mar 15 '17 at 07:29
I think it is different because the padding value in my case is not a percentage but a fixed one in pixel units. — Hans, Mar 15 '17 at 11:58
if you change the display of the parent element to `display: table` it works, in FireFox. :D — Muhammad, Mar 15 '17 at 12:43
In my case it happened only in Firefox, because of this: https://stackoverflow.com/questions/29986977/firefox-ignores-padding-when-using-overflowscroll — Vic Seedoubleyew, Aug 19 '19 at 16:48

score 9 · Accepted Answer · edited May 23 '17 at 12:32

I'm not exactly sure why the padding-bottom fails in Firefox and Safari. It may have something to do with the container being over-constrained. But that's just a guess.

What I am more certain about, however, is a reliable, cross-browser solution. Pseudo-elements on a flex container are rendered as flex items. So instead of padding use ::before and ::after.

.container {
  display: flex;
  width: 200px;
  height: 500px;
}

.parent {
  display: flex;
  flex-direction: column;
  background: red;
  /* padding-top: 20px; */
  /* padding-bottom: 20px; */
  overflow: auto;
  flex: 1;
}

/* NEW */
.parent::before,
.parent::after {
  flex: 0 0 20px;
  content: '';
}

.child {
  flex: 1 0 100px;
  background: green;
  border: 1px solid blue;
}

<div class="container">
  <div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
  </div>
</div>

revised codepen

Flexbox padding bottom fails in Firefox and Safari

1 Answers1

Linked

Related