Flex容器已设置flex-wrap:wrap但子元素定价卡片不换行问题求助

• 未给卡片设置最小宽度：你当前给.card设置的宽度为25%，窗口缩小时卡片宽度会被等比压缩，3张卡片总宽度始终只占视口的75%，永远达不到换行阈值
• 父容器高度规则缺失：你给.card-container设置了80%的百分比高度，但html、body等上层元素未声明高度，导致百分比高度无法正确计算，间接干扰flex换行逻辑

按以下步骤修改对应样式即可解决换行问题：

1. 新增全局基础样式，保证百分比宽高计算正常

/* 放在CSS代码最顶部 */
html, body {
  width: 100%;
  height: 100%;
}

2. 修改flex容器.card-container样式，明确布局规则

.card-container{
    display: flex;
    height: 80%;
    width: 100%; /* 新增，明确容器宽度 */
    padding: 2rem 1rem; /* 新增，避免小屏状态下卡片贴边 */
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem; /* 新增，统一控制卡片之间的间距 */
}

3. 修改卡片.card样式，增加最小宽高限制触发换行

.card{
    background-color: white;
    width:25%;
    min-width: 280px; /* 新增，可根据设计需求调整数值，小于该宽度时触发换行 */
    min-height: 380px; /* 新增，避免内容被挤压变形 */
    margin: 1rem 0; /* 新增，换行后上下行卡片保留间距 */
    height: 70%;
    border-radius: 5%;
    transition: .5s ease;
    border: 3px solid #00255A;
    overflow: hidden;
}

修改后当视口宽度小于3张卡片最小宽度总和时，卡片会自动按顺序换行到下一行，不会出现挤压重叠的情况，原有hover等交互效果不受影响。

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