如何使 flex div 的宽度适应内容

Question

我的想法是给一个自适应的div宽度。当我只有一个项目时，宽度应该与容器 div 中的项目相同。

关于如何执行此操作的任何建议？

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

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

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

原文由 Tomás Francisco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 display: inline-flex

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

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

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

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我相信这两个是你需要的

display: inline-flex;
width: min-content;

原文由 benjarlett 发布，翻译遵循 CC BY-SA 4.0 许可协议