我用CSS和React.js制作了几张卡片，我给它们设置了高度和宽度，但是当我把Flex方向从列改为行时，卡片会自动变小，为什么会这样呢？

卡片的css和js代码
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;
    /* justify-content: 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;
    /* display: flex;
    flex-direction: row; */
}

.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>

我尝试添加伸缩环绕或设置最小高度或最小宽度，但没有任何变化