父元素填充在Firefox中不会产生滚动条

Question

我有简单的HTML，黄色的蓝色框带有滚动条：

.outer {
  height: 50px;
  padding: 50px;
  overflow-y: scroll;
  background-color: yellow;
} 
.inner {
  background-color: blue;
  height: 100px;
}

<div class="outer">
  <div class="inner"></div>
</div>

该问题与外部框填充以及Chrome（v81）和Firefox（v75）中滚动条外观之间的差异有关。

• [Chrome将内部容器显示为100px蓝色框，周围是50px黄色填充（带有滚动条）
• Firefox也显示100px蓝色框，但仅显示顶部黄色50px填充（无滚动条）

从HTML / CSS规范的角度来看，我的代码是否不正确？还是浏览器问题？哪个浏览器错了？我的猜测是，内盒高度应添加到外盒高度中，而无需考虑外部填充；不应该吸收底部填充物（Chrome方式）。如果不正确，如何以正确的方式实现？

Answer 1

因此，实际上根本没有浏览器问题，但是您的盒子缺少盒子大小属性。如果将box-sizing：border-box添加到外部div，则将使浏览器彼此一致。