flex-wrap搭配min-width、max-width不生效的响应式布局问题

Flex布局的子项尺寸由flex-grow（放大规则）、flex-shrink（缩小规则）、flex-basis（初始尺寸基准）三个属性共同控制，默认值为flex: 0 1 auto，即子项不会主动拉伸填充父容器剩余空间。
给卡片项设置width: 100%的写法无法在flex换行场景下生效：一方面flex-grow默认为0，卡片没有拉伸填充的权限；另一方面固定100%宽度的计算逻辑和flex换行的尺寸计算逻辑冲突，最终卡片只会维持最小内容宽度/设置的宽度阈值，无法在区间内自适应调整。

只需要调整.product-wrapper的尺寸控制属性即可，HTML结构和其余样式不需要改动：

• 移除原有写死的width: 100%规则
• 新增flex: 1 1 10rem规则，赋予卡片伸缩能力：
  • flex-grow: 1：允许卡片拉伸填充行内剩余空间
  • flex-shrink: 1：允许空间不足时卡片收窄
  • flex-basis: 10rem：设置卡片初始基准宽度为10rem
• 保留原有max-width: 15rem限制卡片最大宽度，可额外保留min-width: 10rem确保最小宽度符合预期（非必须，flex-basis配合shrink规则已经能实现最小宽度限制，加上更稳妥）

修正后的完整CSS代码如下：

.product-container{
    display: flex;
    gap: 1rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.product-wrapper{
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    /* 替换原width:100% */
    flex: 1 1 10rem;
    min-width: 10rem;
    max-width: 15rem;
}
.product-wrapper a{
    text-decoration: none;
}
.product{
    width: 100%;
}
.product img{
    width: 100%;
}
.price{
    display: flex;
    gap: 1rem;
}

调整后：

• 容器宽度充足时，卡片会均匀拉伸占满行内空间，单卡宽度到15rem时停止拉伸，剩余空间足够放下另一张10rem宽的卡片时就会新增同列卡片
• 容器宽度缩小时，卡片会同步收窄，宽度降到10rem后如果剩余空间不足以容纳新卡片，就会自动触发换行
• 换行后每行的卡片依然会自动适配宽度，不会出现宽度固定、两侧大量留白的问题

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