我使用FlexBox创建一个基本的购买表单，简化的代码在下面的CodePen中。
The Code Pen
有问题的灵活项目是指具有以下特征的项目：
class="purchase_body_checkout_form_selectable-product"
当我在我的实际项目中测试它时（页面上有其他项目），直到添加了第7个Flex项目后才出现结果，在Code Pen中，您可以看到添加第4个Flex项目后我所谈论的内容。

您需要取消注解掉我注解掉的HTML部分在CodePen中，有3个部分，每个部分都有一些注解。

我所说的是，当我添加第四个或更多的Flex项目时，Flex容器会增长。在第五个Flex项目之后，它会增长得更快，并在接下来的几个项目中继续增长。

使用Grid时不会发生这种情况，因此我认为这与Flex的“自我增长”特性有关。

"我不明白为什么会这样"
当我在我的开发环境中对此进行测试时，容器保持相同的大小，直到添加了第7个Flex项。
项目之间没有区别，我使用了React，每个新项目都是其他项目的精确复制品（我完全复制了React元素）。
目前还不清楚为什么Container会在基本上重复了我对第一行所做的操作之后增长，而不需要增长。
如果第一行的大小刚好合适，有2个Flex项（同样，每个Flex项的编码从HTML到CSS都完全相同），那么为什么添加另一行会导致容器增长？
第二行的大小要求应该与第一行相同...对吗？
这就是我想澄清的困惑。有什么想法可以解释这种行为吗？
我的猜测与购买表单的Checkout和Summary部分的容器有关。间隔”，并且关于第四个灵活项目的某些内容需要稍微更多的空间，这导致（结账）容器扩展得更多（因为它具有该空间，通过“间隔”间隙相当大）。
我对Flex Box还是一个新手，所以请尝试解决我在上面的解释中注意到的任何假设或疏忽。
谢谢大家！（注：

总结如下：

尝试将Flex项目添加到Flex容器，预期在第一行之后，第二行的大小要求相同（每个Flex项目都相同），但第二行导致Flex容器的大小增加。
下面是CSS（Code Pen的格式更简洁）：`

body {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 25%;

  gap: 100px;
  
  background-color: gray;
}

.purple-blue { background-color: #5100FF } 

.purchase_body_checkout_container {
  display: flex;
  flex-wrap: wrap;

  width: 100%;

  justify-content: space-between;
  align-items: flex-start;

  gap: 25px;
}

.purchase_body_checkout_form,
.purchase_body_checkout_order-summary {
  padding: 12px;

  border-radius: 12px;

  background-color: white;
}

.purchase_body_checkout_form_product-selection {
  display: flex;
  flex-wrap: wrap;
}

.purchase_body_checkout_form_selectable-product {
  position: relative;
  
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 50%;
  max-width: 50%;
  overflow: hidden;
}

`
基本的HTML结构如下（参见CodePen，了解我上面提到的注解，添加第4个+ Flex项以查看容器的增长）为了保持简洁，只有一个Flex项（CodePen有其余的）：

<div class="purchase_body_checkout_container">

  <div class="purchase_body_checkout_form">
    <h2 class="purchase_body_checkout_form_header">Checkout</h2>
    <div class="purchase_body_checkout_form_product-selection">
      
      <div class="purchase_body_checkout_form_selectable-product">
        <input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
        <h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
      </div>
    </div>
  </div>

  <div class="purchase_body_checkout_order-summary">
    <h2 class="purchase_body_checkout_order-summary_header">Order Summary</h2>
  </div>

</div>