当 <div> 包含包含在列中的项目时，将其宽度限制为其内容 [重复]答案

【问题标题】：Restrict <div>’s width to its content when it contains items wrapped in columns [duplicate]当 <div> 包含包含在列中的项目时，将其宽度限制为其内容 [重复]
【发布时间】：2021-02-07 17:23:21
【问题描述】：

我想将容器中的项目从上到下和从左到右添加以在几列中显示项目。这是我正在处理的代码。

#container {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 250px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container">
  <div class="item">1</div>
</div>

当我将display 属性设置为inline-flex 时，容器确实只包含一列，而不是所有列。如果我将display属性设置为flex，则容器宽度大于所有列的总宽度。

这是我需要更好理解的图像。

如何使容器宽度与内容宽度相同？

【问题讨论】：

已经试过width: min-content;了吗？
不幸的是，它没有用
别的，你能画出你想要的布局图吗？我猜网格可能是您尝试的更好的解决方案
我上传了描述中的图片。
这是 Chrome 和 Firefox 中的一个错误。 chrome bug crbug.com/507397 中散布了一些解决方法。最简单的可能是在弹性盒上指定宽度，如下所述。

标签： html css flexbox css-grid

【解决方案1】：

这是通过display: inline-grid 使用Grid Layout 的解决方案。

grid-template-rows: repeat(3, max-content) 表示应该有三行，每行max-content 高。我使用max-content 而不是1fr，因为当我尝试使用1fr 时，第二个容器的底部有空白空间，使容器高三排。 max-content 似乎通过在其中没有项目时折叠这些行来解决此问题。

#container {
  display: inline-grid;
  grid-template-rows: repeat(3, max-content);
  grid-auto-flow: column;
  
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div id="container">
  <div class="item">1</div>
</div>

另外，如果您添加到 #container .item 的 margin: 10px 只是为了在 Flex 项目之间添加边距，您现在可以在 #container 中将其替换为 gap: 10px。

最后，display: inline-grid 中的inline 可能会因为元素之间的空白被呈现为文本而给您带来麻烦。如果这引起了麻烦，您应该可以改用display: grid，然后用display: flex 将两个容器包装在另一个div 中。

【讨论】：