响应式Modal内flex换行内容无法利用充足空间展示更多列如何解决

问题根因 #

你当前的布局异常核心原因是flex容器.Modal未设置合理的宽度约束，默认状态下flex容器会优先收缩子元素再触发换行，且无最大宽度限制导致无法正确计算可容纳的列数，最终出现明明有剩余空间却提前换行的问题。

修复方案 #

调整后的完整CSS代码 #

.ModalBlur {
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0, 0.5);
    /* 修正原错误属性：overflow不存在none值，小屏内容溢出时可滚动 */
    overflow: auto;
    padding: 20px 0;
    box-sizing: border-box;
}

.Modal {
  display: flex;
  flex-wrap: wrap;
  /* 控制列间距，可根据需求调整 */
  gap: 16px;
  justify-content: flex-start;
  /* 核心配置：宽度最大占屏幕90%，且不超过7列的总宽度（7个列宽+6个间隙） */
  width: 90%;
  max-width: calc(7 * 150px + 6 * 16px);
}

section {
  background: white;
  border: 1px solid red;
  box-sizing: border-box;
  /* 核心配置：列宽最小75px，小屏最多2列（单列最大45%屏幕宽度），最大固定150px */
  flex: 0 0 clamp(75px, 45vw, 150px);
}

关键修改说明 #

• 给.Modal增加了宽度约束：最大占屏幕宽度的90%，同时上限为7列的总宽度，既可以充分利用可用空间，也符合大屏最多7列的需求
• 用clamp控制列的宽度：小屏下单列最大宽度为45vw，保证小屏最多显示2列，最小宽度75px避免内容过度挤压，大屏固定为150px符合需求
• 增加了gap控制列间距，避免列之间无留白的问题，同时修正了原overflow: none的错误属性

可选Grid实现方案 #

你之前尝试Grid不生效是因为没有给Grid容器设置宽度约束，按以下配置即可正常运行：

.Modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(75px, 45vw, 150px), 1fr));
  gap: 16px;
  width: 90%;
  max-width: calc(7 * 150px + 6 * 16px);
}

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