Flexbox填充底部在Firefox和Safari中失败

Question

向下滚动.parentdiv时，由于，您应该在底部看到其红色背景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

编辑：此问题与建议的重复项有所不同，因为它认为像素填充固定，而不是重复项填充百分比存在问题。

Answer 1

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

但是，我更确定的是可靠的跨浏览器解决方案。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>

修改后的代码笔