Flex布局方向改为row时卡片尺寸自动缩小问题求助

我用CSS和React.js制作了若干卡片组件，已为其设置固定高度与宽度，但将父容器的flex布局方向从column改为row后，卡片会自动缩小。尝试添加flex-wrap属性、设置min-height与min-width，均无效果。

卡片组件代码 #

CSS

.card{
    height: 50%;
    width: 30%;
    min-width: 30%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}

.card:hover{
    cursor: pointer;
}

img{
    height: 80%;
    width: 100%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.schoolName{
    font-weight: 700;
    color: #100F0F;
    margin-top: 10px;
    margin-left: 4px;
}

.sub{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.schoolLocation{
    color: #100F0F;
    margin-left: 4px;
}

.reviews{
    color: #100F0F;
    margin-right: 4px;
}

@media only screen and (max-width: 600px){
    .card{
        height: 40%;
        width: 80%;
    }
    .schoolName{
        font-size: 20px;
    }
}

JS

<div className={PopularCardCSS.card}>
    <img src={props.schoolImage} alt="school" />
    <div className={PopularCardCSS.cardContent}>
        <h2 className={PopularCardCSS.schoolName}>{props.schoolName}</h2>
        <div className={PopularCardCSS.sub}>
            <p className={PopularCardCSS.schoolLocation}>
                {props.schoolLocation}
            </p>
            <p className={PopularCardCSS.reviews}>
                <span className={PopularCardCSS.rating}>{props.reviews} reviews</span>
            </p>
        </div>
    </div>
</div>

调用卡片的父组件代码 #

CSS

.parent{
    display: flex;
    align-items: center;
    background-image: url(../assets/background2.jpeg);
    background-size: cover;
}

.glass{
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    height: 100vh;
}

.cardContainer{
    display: flex;
    flex-direction: row;
}

JS

<div className={PopularCSS.card}>
    <div className={PopularCSS.parent}>
        <div className={PopularCSS.glass}>
            <h1 className={PopularCSS.title}>Popular Schools</h1> 
            <div className={PopularCSS.cardContainer}>
                <div className= {PopularCSS.school}>
                    <PopularCard
                        schoolImage = {schoolimage}
                        schoolName="Ron Arad" 
                        schoolLocation="Rehovot" 
                        reviews="4"
                    />
                </div>
                <div className= {PopularCSS.school}>
                    <PopularCard
                        schoolImage = {schoolimage}
                        schoolName="Ron Arad" 
                        schoolLocation="Rehovot" 
                        reviews="4"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

核心原因 #

Flex子元素默认flex-shrink: 1，当容器空间不足时会自动收缩；同时卡片的百分比高度依赖父容器的明确高度，否则无法生效。

具体修改步骤 #

1. 禁止卡片收缩
   给.card添加flex-shrink: 0，强制保留设置的宽度：

.card{
    height: 50%;
    width: 30%;
    min-width: 30%;
    flex-shrink: 0; /* 新增 */
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}

2. 让卡片容器支持换行
   给.cardContainer添加flex-wrap: wrap，并可选设置卡片间距：

.cardContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* 新增 */
    gap: 20px; /* 可选，设置卡片间间距 */
    padding: 10px 0; /* 可选，避免卡片贴容器边缘 */
}

3. 修复卡片百分比高度失效问题
   卡片的height: 50%需要父元素（.school）有明确高度，或者改用固定高度：

/* 方法1：给.school设置高度 */
.school{
    height: 50%;
}

/* 方法2：给卡片用固定高度（更稳妥） */
.card{
    height: 320px; /* 替换50% */
    width: 30%;
    min-width: 280px; /* 可选，设置最小宽度适配小屏 */
    flex-shrink: 0;
}

4. 优化图片显示比例
   给图片添加object-fit: cover，避免拉伸变形：

img{
    height: 80%;
    width: 100%;
    object-fit: cover; /* 新增 */
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

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