如何在仅定义min-width和max-width时让Flexbox项目宽度一致？

我在仅定义了max-width和min-width的可换行Flexbox行布局中，设置flex-grow:1和flex-basis:0后，除最后一行有多余空间的情况外，其余项目都能实现宽度一致。现在想知道，不指定width属性的前提下，能不能让所有Flexbox项目宽度完全一致？要求最后一个项目和其他项目宽度相同，同时第一、第二行的项目填满容器空间。

原示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
  gap: 10px;
  background-color: lightseagreen;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: coral;
  padding: 10px;
  min-width: 100px;
  max-width: 150px;
  height: 40px;
}

<div class="container">
  <div class="item">some text</div>
  <div class="item">some other text but longer</div>
  <div class="item">longer</div>
  <div class="item">some other</div>
  <div class="item">some other text but longer</div>
</div>

解决方案1：Flex布局下用伪元素填充空白 #

给容器添加一个伪元素，让它和项目拥有相同的Flex属性，以此占据最后一行的剩余空间，迫使最后一行的项目宽度与前面行保持一致：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
  gap: 10px;
  background-color: lightseagreen;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: coral;
  padding: 10px;
  min-width: 100px;
  max-width: 150px;
  height: 40px;
}

/* 添加伪元素填充最后一行空白 */
.container::after {
  content: "";
  flex-grow: 1;
  flex-basis: 0;
  min-width: 100px;
  max-width: 150px;
}

原理：伪元素会被当作Flex项目参与布局，当最后一行存在空余空间时，它会和最后一行的项目共同分配剩余空间，保证最后一个项目的宽度与前面行的项目一致，同时前面的行因项目数量足够会自动填满容器。

解决方案2：用Grid布局更简洁 #

如果可以切换布局方式，Grid的auto-fit + minmax组合能更轻松实现需求，无需额外处理最后一行的问题：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  width: 300px;
  height: 200px;
  gap: 10px;
  background-color: lightseagreen;
}

.item {
  background-color: coral;
  padding: 10px;
  max-width: 150px; /* 保留原有的最大宽度限制 */
  height: 40px;
}

原理：repeat(auto-fit, minmax(100px, 1fr))会根据容器宽度自动生成列，每列最小宽度为100px，最大宽度占满剩余空间；auto-fit会让列自动填满容器，最后一行的项目宽度会和其他列保持一致，同时满足填满容器的要求。

内容的提问来源于stack exchange，提问作者Mishaszu