当物品包裹时，Flex 容器会拉伸至全宽

Question

我希望弹性容器在项目包装时能够扩展到最大的项目。 给定下面的容器，它应该与标记为 1 的项目一样膨胀，并且侧面不留间隙。

#main {
  display: inline-flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid #c3c3c3;
}

#main div {
  height: 50px;
}

<div style="width: 200px; text-align: center;">
  <div id="main">
    <div style="width: 145px; background-color:coral;">1</div>
    <div style="width: 40px; background-color:lightblue;">2</div>
    <div style="width: 70px; background-color:khaki;">3</div>
    <div style="width: 100px; background-color:pink;">4</div>
  </div>
</div>

Answer 1

将

width: min-content

添加到 Flex div。

#main {
  width: min-content;
  display: inline-flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid #c3c3c3;
  text-align: center;
}

<div style="width:200px;">
  <div id="main">
    <div style="width:145px;height:50px;background-color:coral;">1</div>
    <div style="width:40px;height:50px;background-color:lightblue;">2</div>
    <div style="width:70px;height:50px;background-color:khaki;">3</div>
    <div style="width:100px;height:50px;background-color:pink;">4</div>
  </div>
</div>