如何实现内容量不同但尺寸统一的无溢出卡片？

我的卡片布局相关代码如下，由于填充卡片的文本是动态内容，内容量不同导致卡片尺寸不一致，需要保留卡片边界框（hover时有过渡效果），实现尺寸统一的卡片。

容器CSS代码 #

.cards-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    border: 5px solid violet;
}
.card {
    margin: 10px;
    transition: all 0.4s;
    width: 25em;
    /* height: 25em; */
    border: 5px solid black;
}

React页面渲染代码 #

<div className={classes['cards-container']}>
    {
        articlesData.length > 0 ?
        articlesData.map( (article) => 
        <div key={article.id} className={classes.card}>
            <Card 
                title={article.title}
                body={article.abstract}
                />
        </div>
        ) :
        null
    }
</div>

Card组件CSS样式 #

.mycard {
    background-color: white;
    display: block;
    padding: 1rem;
    border-radius: .25rem;
    /* box-shadow: 0 2px 8px 0 rgba(0,0,0,0.9); */
    border: 5px solid red;
}

.mycard-body {
    font-size: 0.7rem;
}

.mycard-header {
    /* font-size: 1.5rem; */
    font-size: 1rem;
    margin-bottom: .5rem;
}

.mycard-footer {
    margin-top: 1rem;
}

Card组件定义 #

const Card = (props) => {
    
    const mainText = props.body.slice(0,300);

    const [textBody, setTextBody] = useState(mainText + '...');

    
    const onSeeMore = () => {
        setTextBody(props.body);
    }

    return <>
        <div className={classes.mycard}>
            <div className={classes['mycard-header']}>
                {props.title}
            </div>
            <div className={classes['mycard-body']}>
                {textBody}
            </div>
            <div className={classes['mycard-footer']}>
                <button type='button' onClick={onSeeMore}>See More.</button>
            </div> 
        </div>
    </>
};

解决方案 #

方法一：自适应最高卡片高度（推荐） #

利用Flex布局特性，让所有卡片自动匹配最高卡片的高度，同时内部内容区域自动填充空间：

1. 修改.card样式，开启flex布局：

.card {
    margin: 10px;
    transition: all 0.4s;
    width: 25em;
    border: 5px solid black;
    display: flex; /* 新增：让内部组件撑满高度 */
}

2. 修改.mycard和.mycard-body样式，实现内部元素垂直分布，内容区自动填充：

.mycard {
    background-color: white;
    display: flex; /* 从block改为flex */
    flex-direction: column; /* 垂直排列内部元素 */
    flex: 1; /* 占满父容器的全部高度 */
    padding: 1rem;
    border-radius: .25rem;
    border: 5px solid red;
}

.mycard-body {
    font-size: 0.7rem;
    flex: 1; /* 填充header和footer之外的剩余空间 */
    overflow-y: auto; /* 可选：内容过多时显示滚动条 */
}

这种方式下，所有卡片高度会自动对齐到最高的那一张，内容较少的卡片会用空白填充，footer始终固定在卡片底部。

方法二：固定卡片高度 #

如果需要卡片高度严格统一，避免布局随内容变化，可以设置固定高度：

1. 给.card设置固定高度并开启flex：

.card {
    margin: 10px;
    transition: all 0.4s;
    width: 25em;
    height: 30em; /* 设置固定高度，可根据需求调整 */
    border: 5px solid black;
    display: flex;
}

2. 同样修改.mycard和.mycard-body样式，确保内容撑满且超出时滚动：

.mycard {
    background-color: white;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
    border-radius: .25rem;
    border: 5px solid red;
}

.mycard-body {
    font-size: 0.7rem;
    flex: 1;
    overflow-y: auto; /* 内容超出时滚动 */
}

这种方式适合对布局稳定性要求高的场景，卡片高度不会随内容变化，过多内容通过滚动条展示。

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