如何让flex容器仅占用展示最大列数项目所需的最小宽度

核心问题是第二栏的Flex容器默认会拉伸占满父元素剩余主轴宽度，导致整数个卡片排完后，剩余空缺区域仍显示容器的橙色背景。无需修改DOM结构，仅调整CSS即可实现目标效果。 #

完整CSS代码 #

.top {
  display: flex;
  background: black;
  /* 不需要两栏等高时可开启，避免容器高度被默认拉伸 */
  /* align-items: flex-start; */
}
.c1 {
  min-width: 50px;
  background: yellow;
}
.c2 {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 150px);
  gap: 10px;
  background: orange;
  max-width: 100%;
  vertical-align: top;
}
.card {
  width: 150px;
  height: 30px;
  background: green;
  border-radius: 20px;
}

HTML结构不需要做任何改动，保持原有代码即可。 #

原理说明 #

• 将第二栏容器从flex改为inline-grid：行内Grid容器默认宽度为收缩适配内容，不会自动拉伸占满父级剩余空间
• grid-template-columns: repeat(auto-fit, 150px)会根据容器可用宽度自动计算单行可容纳的最大卡片数，剩余空间不足放置新卡片时不会生成空列，橙色背景只会覆盖实际有卡片/间距的区域
• max-width: 100%限制容器最大宽度不超过父级剩余空间，窄屏下不会出现横向溢出
• 原有卡片固定宽度、圆角、间距等表现完全和之前一致，gap属性的渲染效果和Flex布局下无差异

适配表现 #

屏幕尺寸变化时，容器会自动计算单行可放置的卡片数量：

• 单行可放3张卡片时，橙色区域宽度恰好为3张卡片+2个间距的总宽度，右侧剩余区域显示父级黑色背景
• 屏幕变宽可容纳4张卡片时，橙色区域自动扩展到4张卡片+3个间距的宽度，始终贴合最右侧卡片的右边界
• 窄屏场景下卡片自动换行，不会出现布局错乱

实现效果和参考示例完全匹配：

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