Flex包装在包装到多行时添加额外空间[重复]

Question

这个问题在这里已有答案：

• Make container shrink-to-fit child elements as they wrap 4个答案

我有一个与flex-wrap: wrap的flex。当所有项目都放在一行中时，容器只占用内容宽度。但是当它包裹到多条线时，它会在右侧增加额外的空间。我用inline-flex尝试了align-content: flex-start，但没有运气。

如何才能使物品宽度的容器适合它们宽度添加额外的填充？

在下面的链接示例（我的笔记本电脑屏幕）上，如果我有最多3个项目div（第一行有2个项目，第二行有3个项目），它很好但是当我添加第四个项目div（第一个和第二个项目在第一行以及第二行的第3和第4项），自动添加填充。

.grandparent {
  display: flex;
}

.toggle {
  display: none;
}

.main {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}

.item {
  width: 300px;
  border: 1px dotted green;
  padding: 10px
}

.icondiv {
  width: 800px;
  border: 1px solid #333;
}

<div class="grandparent">
  <div class="parent">
    <div class="toggle">Toggle</div>
    <div class="main">
      <div class="item">first</div>
      <div class="item">second</div>
      <div class="item">third</div>
      <div class="item">fourth</div>
    </div>
  </div>
  <div class="icondiv">Icon div</div>
</div>

Answer 1

我觉得这样的东西会根据你的需要而工作：

.grandparent {display:flex;}
.toggle {display: none;}
.main {
  display: flex; 
  flex-wrap: wrap;
  border: 1px solid blue;
  flex-direction: row;
  width: 604px !important;
  height: 70px !important;
}
.grandparent, .parent .main, .item{ 
  width: 300px; 
  border: 1px dotted green; 
  position: relative; 
  float:left !important;
 
}
.grandparent, .icondiv { width: 800px; border: 1px solid #333;}

<div class="grandparent">
  <div class="parent">
    <div class="toggle">Toggle</div>
    <div class="main">
      <div class="item">first</div>
      <div class="item">second</div>         
      <div class="item">third</div>
      <div class="item">fourth</div>
    </div>
  </div>
  <div class="icondiv">Icon div</div>
</div>