背景颜色从父对象溢出

Question

我遇到一个问题，子元素的背景颜色超过了父元素的边界。我该怎么补救？

.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}

<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>

编辑：我应该提到，我试图只在banner的顶部添加相同的边界半径，但这在颜色和父对象的边界之间留下了一个小的空白。

Answer 1

overflow:hidden将阻止内部子元素扩展到父元素的边界之外。

.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}

<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>

Answer 2

除了使用overflow: hidden之外，还可以使用contain: content，它"告诉"其他元素，该特定元素内的子元素永远不会影响其他元素，也永远不会显示在父元素外。

.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}

<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>