Html CSS父对象根据绝对定位的内容进行调整

我希望我的父母

div

根据内容调整其大小，但我的问题是内容使用

position:absolute将父级
div
呈现为没有任何内容

以下是a和相应的代码：

HTML
我想我想从这个问题中得出以下结论：


我可能的解决方案是什么
如果我们考虑到跨浏览器友好性，这些解决方案中哪一个是最好的
你见过这条线吗@帕斯卡尔戈德巴赫好的，谢谢，我来看看。为什么是绝对的？您可以执行
position:relative
，这样可以在保留“阴影元素”的同时进行定位。@4castle，因为这样会影响其他内容的位置，如下所示。请注意，我还有其他块作为内容，它们也是绝对定位的。@4castle这里有另一个我使用
relative
和
display:inline块的地方在块上，但是同样的问题发生了。你看到这个线程了吗@帕斯卡尔戈德巴赫好的，谢谢，我来看看。为什么是绝对的？您可以执行
position:relative
，这样可以在保留“阴影元素”的同时进行定位。@4castle，因为这样会影响其他内容的位置，如下所示。请注意，我还有其他块作为内容，它们也是绝对定位的。@4castle这里有另一个我使用
relative
和
display:inline块的地方在块上，但同样的问题也会发生。
<p>Gray box adjusts based on the green box's size.</p>
<div class="box">
  <div class="block"></div>
</div>

<p>Gray box doesn't adjust because the green box is absolutely positioned.</p>
<div class="box">
  <div class="absolute block"></div>
</div>

.box {
  padding: 5px;
  background-color: #888888;
}

.block {
  width: 60px;
  height: 60px;
  background-color: #65da98;
}

.absolute {
  position: absolute;
  left: 50px;
}