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

编辑：此问题与建议的副本有所不同，因为它以像素为单位考虑固定填充的问题，而不是副本中的填充百分比。

Answer 1

我不确定为什么padding-bottom在Firefox和Safari中失败了。它可能与容器over-constrained有关。但这只是猜测。

然而，我更确定的是一种可靠的跨浏览器解决方案。 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; }。

＆＃13;

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

＆＃13;

EX_FIELDS

＆＃13;

revised codepen

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

1 个答案: