子级div在父级的绝对位置

Question

请协助我解决这个奇怪的问题。

<div style="position: absolute;width:700px;height:410px;background-color: #e2e2e2;border: solid black 1px; left:0;top:0;right:0;bottom:0;margin: auto;">
    <div style="padding: 0px 20px;">
        Header
    </div>
    <div style="border: solid black 2px;height: 30px;padding: 10px;overflow-y: auto;">
        Content
    </div>
 </div>

内容div的height属性设置为30px，但在渲染页面时，它实际上显示为6px。我注意到它总结了边框和填充高度;所以计算将是

2px + 2px（顶部和底部边框）
10px + 10px（顶部和底部填充）
6px（物理高度）

总计：30px

我认为制作父div的绝对位置有效，但不知道如何修复它。