Flexbox在Firefox和Safari中无法正确显示padding-bottom

Question

向下滚动.parent div时，由于padding-bottom的存在，您应该在底部看到其红色背景。这在Chrome中有效，但在Safari和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

编辑：这个问题与提出的重复问题不同，因为它涉及到固定像素填充中的问题，而不是百分比填充。

- Björn

---

可能是Flexbox布局中的padding-bottom/top问题的重复。 - Muhammad

我认为这是不同的，因为在我的情况下，填充值不是百分比，而是以像素单位固定的值。 - Björn

如果将父元素的显示方式更改为 display: table，在 FireFox 中它会工作。:D - Muhammad

在我的情况下，这只发生在Firefox浏览器中，因为这个原因：https://dev59.com/w10a5IYBdhLWcg3wva56 - Vic Seedoubleyew

Answer 1

我不确定为什么Firefox和Safari中padding-bottom会失败。这可能与容器被过度约束有关，但这只是猜测。

然而，我更确定的是一个可靠的、跨浏览器的解决方案。伪元素在flex容器上呈现为flex项。所以，不要使用padding，而是使用::before和::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>

修改后的CodePen

- Michael Benjamin