Html 如何使容器完全适合其内容物而不强制内容物收缩到其最小宽度？

假设我有一个具有流体宽度的div（例如，最小宽度200px和最大宽度1000px）。我们称之为第一组。我希望将此div包装在父div中，并希望此父div收缩以适合Div1，而不影响Div1的宽度

根据我所读到的，使父对象适合其内容的方法是将父对象的显示设置为内联块。然而，每当我这样做，它似乎迫使内容收缩到其最小宽度。下面是codepen上的一个示例-我有两个具有完全相同属性的div，但其中一个被强制为最小宽度，因为它有一个带有display:inline block的父容器

下面的代码（顶部为HTML，底部为CSS）

此div被强制设置为其最小宽度。
此div不会强制设置为其最小宽度。
.具有最小宽度的div{
边框：1px红色实心；
背景：红色；
颜色：黄色；
最小高度：100px；
最小宽度：200px；
最大宽度：1000px；
}
.集装箱{
边框：4px绿色实心；
显示：内联块；
}

---

如何在不实际更改子对象宽度的情况下将父对象包裹到子对象的宽度？

添加

float:left或<代码>浮动：右侧或
溢出：隐藏
折叠父元素。
看起来您要做的是让子元素根据父元素上方的包含块（例如，可以是祖父母元素）计算其宽度，而不是根据属于父元素本身的包含块，然后让父元素根据该宽度适配子元素。我只是在这里大声思考-根据我的解释，其他人可能会有一个解决方案。（如果你想做的只是添加一个额外的边框，你可以在孩子身上使用outline属性作弊，但是outline不会影响布局，这可能会破坏你的交易。）谢谢你的回复。实际上，我确实希望父容器完全适合其子容器。我的用例：内部元素是一个具有流体宽度的表。我想在桌子下面有一个按钮，它总是与桌子的右边缘完全对齐。我的想法是，我会有一个完全适合表格的父容器，然后将页脚中的按钮浮动到父容器的右侧。也许有更好的方法可以做到这一点，但这让我对如何收缩包裹流体宽度元素感到好奇。
<div class="container">
  <div class="div-with-min-width">
    This div is forced to its minimum width.
  </div>
</div>

<div class="div-with-min-width">
  This div is not forced to its minimum width.
</div>

.div-with-min-width {
  border: 1px red solid;
  background: red;
  color: yellow;
  min-height: 100px;
  min-width: 200px;
  max-width: 1000px;
}

.container {
  border: 4px green solid;
  display: inline-block;
}