css - Shrinkwrap div 到包装的内容

Question

我正在尝试根据其子项调整容器 div 的大小，它可以换行到多行。如果子项(蓝色框)进行换行，则容器的宽度为 100%(黑色边框，下图)。我想避免这种情况，并将容器设置为其任何子项的最大宽度。

.container {
  border: 1px solid black;
  width: fit-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

有人可以帮忙吗？我知道这可以用 javascript 完成，但我更喜欢纯 css 解决方案，因为它似乎 很简单。谢谢!

更新:这是一个片段，展示了它的外观，但在这种情况下，它阻止了 .child div 显示为内联(我想在有空间时允许这样做):

.container {
  border: 1px solid black;
  width: min-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

你可以尝试在容器元素上使用

.container {
    border: 1px solid black;
    display: inline-block;
    width: min-content;
}