HTML/CSS根据子内容自动调整父div的高度/宽度

我想说：

html看起来是这样的：

<div class="container>
  <div class="top-card>
   <div class="card-content">
     ...
   </div>
  </div>
  <div class="bottom-card>
  </div>
</div>

---

我有麻烦的样式，使整个卡的高度自动调整，根据内容的顶部卡。提前感谢。

您可以结合使用方框阴影和显示：内联块来完成您正在尝试的操作。我已经更新了答案。代码如下：

.祖父母{ 显示：内联块； 位置：相对位置； } .家长{ 显示：内联块； 背景：蓝色； 位置：绝对位置； 排名：0； 左：0； } .孩子{ 宽度：100px； 高度：100px； 背景：红色； 保证金：5px； } .影子{ 左边距：-7px； 利润上限：-7px； 背景：粉红色； z指数：-100； 边框：1px纯绿色； } .空的{ 不透明度：0； }

---

有一件事我忘了提，最下面的牌应该总是和最上面的牌一样大。但是底部的卡片将没有内容。只是为了造型，但是盒子阴影的边框呢？请接受我的答案，如果它对你有帮助的话，请投上一票。谢谢