使div始终具有其内容的宽度

Question

我有一个容器div，里面有几个元素，如下所示：

<div class="container">
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <p>six</p>
  <p>seven</p>
  <p>eight</p>
</div>

看起来像这样：

你可以.container div（蓝色）扩展来填充窗口的整个宽度。我希望它始终拥抱＆＃39;内部p，始终必须具有最小width。

我已将其设为display: inline-block。现在看起来像

这就是问题所在。当我重新调整窗口大小以便其中一个元素被“推”时。直到第二行，.container div不会缩小以适应元素的新大小。相反，它会延伸到窗口的边缘。

即使在重新调整尺寸时，我如何使div适合其内容，以便它看起来像这样？

我搜索过，但找不到这个问题的答案。

JSFiddle Here

Answer 1

这是不可能的，所以尽可能接近，你可以使用flexbox

＆＃13;

＆＃13;

body {
  margin: 0
}
.container {
  background: lightblue;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}
.container p {
  background: pink;
  font-size: 40px;
  margin:10px 0
}

＆＃13;

<div class="container">
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <p>six</p>
  <p>seven</p>
  <p>eight</p>
  <p>nine</p>
  <p>ten</p>
</div>

＆＃13;

＆＃13;

＆＃13;