Html 如何将背景色填充到父元素'；她身高多少？

在制作卡片时，我有一个难题。我想填充整个框内容的背景色，但我是html和css的初学者，所以我不知道怎么做。 我的密码如下

.box-container1{
显示器：flex；
证明内容：中心；
}
.盒子{
背景色：白色；
边框：1px实心#3AD6B1；
盒影：0 3px 6px#ddd；
填充：0；
利润率：8px；
宽度：420px；
}
.box.box标题{
背景色：#3AD6B1；
宽度：100%；
填充：0；
保证金：0；
显示器：flex；
身高：4rem；
}
.盒子.盒子img{
填充：0.5雷姆；
文本对齐：居中；
对齐项目：居中；
垂直对齐：中间对齐；
}
.box.box内容{
保证金：0.5雷姆；
背景色：rgba（0,0,0,0.4）；
文本对齐：左对齐；
}
.bg绿色{
背景色：#3AD6B1！重要；
}
.bg-green01{
背景色：#1CA484；
}

1.
方框1
这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。
2.
方框2
这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。

您需要为选择器

.box

添加两个

flex

规则

display:flex

和

flex direction:column

另外，为选择器

.box.box内容添加规则
flex:1
。伸展整个自由空间

并在同一选择器中将
边距
更改为
填充


.box-container1{
显示器：flex；
证明内容：中心；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
背景色：白色；
边框：1px实心#3AD6B1；
盒影：0 3px 6px#ddd；
填充：0；
利润率：8px；
宽度：420px；
}
.box.box标题{
背景色：#3AD6B1；
宽度：100%；
填充：0；
保证金：0；
显示器：flex；
身高：4rem；
}
.盒子.盒子img{
填充：0.5雷姆；
文本对齐：居中；
对齐项目：居中；
垂直对齐：中间对齐；
}
.box.box内容{
填充：0.5雷姆；
背景色：rgba（0,0,0,0.4）；
文本对齐：左对齐；
弹性：1；
}
.bg绿色{
背景色：#3AD6B1！重要；
}
.bg-green01{
背景色：#1CA484；
}

1.
方框1
这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。
2.
方框2
这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。这是示例文本。
是的，它可以工作。谢谢你的帮助。@George，我已经添加了关于如何实现这一点的说明。我很高兴能帮忙。