可滚动高度忽略Safari/Chrome中可滚动div的最后一个子项的下边距

Question

.scroll {
border: 1px solid black;
width: 200px;
height: 200px;
overflow: scroll;
background-color: yellow;
}
.inner {
height: 100%;
}
.content {
height: 100%;
margin: 50px 0;
background-color: red;
}

<div class="scroll">
<div class="inner">
<div class="content">
</div>
</div>
</div>

Fiddle

上面的代码段包含一个大小为200px的可滚动div。里面是一个高度100%的元素，里面是另一个高度为100%但上下边距为50px的元素。

我希望div的可滚动高度是50+200+50=300px。事实上，Chrome和Firefox的情况就是这样，当你滚动div时，你可以看到顶部和底部的黄色边距，但出于某种原因，Safari会剪辑底部边距，可滚动的高度只有50+200=250px。

这里谁是正确的？这是Safari漏洞吗？有没有一个简单的解决方案，而不需要过多地改变页面的整体结构？

Answer 1

将overflow: auto;添加到div.inner似乎可以解决Safari中的问题。

.scroll {
border: 1px solid black;
width: 200px;
height: 200px;
overflow: scroll;
background-color: yellow;

}
.inner {
height: 100%;
overflow: auto;
}
.content {
height: 100%;
margin: 50px 0;
background-color: red;
}

<div class="scroll">
<div class="inner">
<div class="content">
</div>
</div>
</div>