高度＆gt;时忽略底部填充;最大高度，到处都是镀铬

Question

我有一个容器div，其内容周围有一些填充，最大高度为overflow: auto，容器底部有一些按钮。当容器的内容增长到足以显示滚动条时，底部填充就会消失。这似乎发生在看似每个浏览器，但Chrome。

＆＃13;

＆＃13;

.container {
  border: 1px solid;
  padding: 15px;
  max-height: 200px;
  overflow-y: auto;
  
  display: inline-block;
  width: 200px;
}

.footer {
  background: green;
}

＆＃13;

<div class="container">
  <div style="height: 100px">Hello World</div>
  <div class="footer">Footer Stuff</div>
</div>

<div class="container">
  <div style="height: 200px">Hello World</div>
  <div class="footer">Footer Stuff</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是Firefox中的样子。正确的容器一直向下滚动;你可以看到缺少底部填充。

这是一个已知的错误吗？有推荐的解决方法吗？

（目前我正在制作一个＆＃34;内部容器＆＃34;类并将填充物放在那个而不是外部＆＃34;容器＆＃34;，但似乎就像我不应该这样做）