当向下滚动时.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>
代码笔：http://codepen.io/anon/pen/NpvJPY http://codepen.io/anon/pen/NpvJPY
编辑：这个问题与建议的重复问题不同，因为它涉及以像素为单位的固定填充问题，而不是重复问题中的百分比填充问题。
我不太确定为什么padding-bottom在 Firefox 和 Safari 中失败。可能和容器有关系过度约束 https://stackoverflow.com/a/38997047/3597276。但这只是一个猜测。
然而，我更确定的是一个可靠的跨浏览器解决方案。 Flex 容器上的伪元素呈现为 Flex 项目。所以而不是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>
修改后的代码笔 http://codepen.io/anon/pen/JWrJqb?editors=1100
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
