CSS：嵌套DIV在使用圆角时不会填充父级

Question

我有两个div，父级有圆角，溢出：隐藏和内联背景图像，子div是位置：绝对，背景颜色和不透明度。

在我的正常屏幕尺寸下，孩子DIV几乎填充了父DIV，但我可以在角落处显示父DIV的一小部分。

更大的问题是，当我放大页面时，在某些屏幕尺寸下，儿童DIV比父DIV要小得多，这显然看起来很糟糕。

这是我的代码：

.parent-div {
    height:350px;
    border-radius:4px;
    overflow:hidden;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
}
.child-div {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    text-align:left;
    background-color:rgba(255,255,255,0.9);
}

我已经搜索了这个，但无法找到有效的解决方案。我已尝试在子DIV上添加边框半径，但这不起作用。

仅供参考 - 当不使用边框半径时，一切似乎都很好。

编辑：我想我有点发现了这个问题。我有另外一个div与所有这些填充。当我摆脱它时它起作用。当我更改填充大小时，我可以看到这导致上面图像中出现各种填充大小的问题。

EDIT2：实际上，我发现造成这个问题的原因是溢出：隐藏在父div上。当删除它并确保我在子div上有边界半径时，一切都按预期工作。

Answer 1

如果你提供一个工作小提琴，那会更好，但我认为你的问题是.child-div的安慰。试试这个：

.child-div {
    box-sizing: border-box; /* here */
    border-radius: 4px; /* to apply the same that the parent */
    height: 100%; /* to make all height */
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    text-align:left;
    background-color:rgba(255,255,255,0.9);
}