Html 如何在“收缩以适应”元素中删除单词换行造成的额外空间？

我正在尝试使用“收缩”来适应

#容器

。它可以完美地工作，直到它包含的元素结束。这导致它扩展到180像素

CSS:

HTML:

内容
内容

我理解为什么会发生这种行为，但我还没有找到任何解决办法

---

这可以解决吗？

我通过使用显示属性实现了这一点：

#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

请参阅：

尝试使用：

{
  display: inline-flex;
}

---

为什么使用

display:table在
#container
上，而不是
在
#container>div
上的
表格单元格
？表仍然是块元素，它们总是延伸到可用的宽度（在本例中为180px）–使其
内联块
也…另请参见：表的行为不同于其他块，并收缩以适应其内容。然而，我修改了我的问题，使行为更清晰。“行为更清晰”不是真的，如
float:left没有改变任何东西，我仍然不知道期望的结果应该是什么样子。我希望这能让事情变得更清楚。我不希望红色容器可见，我需要它收缩以适应包含的div。不幸的是，这不会随着屏幕尺寸的变化而动态调整自身大小。这似乎不起作用：目标是使
#container
收缩以适应其内容，从而使红色区域不再可见。
#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

{
  display: inline-flex;
}