Flexbox填充底部在Firefox和Safari中失败 [英] Flexbox padding bottom fails in Firefox and Safari

问题描述

向下滚动.parent div时，由于padding-bottom，您应该在底部看到其红色背景.这在Chrome中有效，但在Safari和Firefox中无效.

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

此问题与拟议的重复项有所不同，因为它认为像素填充固定存在问题，而不是重复项中的填充百分比.

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.

推荐答案

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

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.

但是，我更确定的是可靠的跨浏览器解决方案. flex容器上的伪元素被渲染为flex项目.因此，请使用::before和::after代替padding.

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>

修订后的Codepen

这篇关于Flexbox填充底部在Firefox和Safari中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！