CSS设置卡片固定尺寸时如何避免内容溢出实现自适应

问题核心原因 #

设置max-height后内容溢出，本质是布局规则没有适配固定高度约束：

• 卡片头图未设置固定尺寸，会按原始分辨率比例撑高头部
• 纵向Flex布局下的内容区默认最小高度等于内部内容高度，无法自动收缩适配剩余空间
• 超长描述文本没有截断规则，直接向外溢出
• 卡片未配置溢出裁剪，超出边界的内容直接显示在外

问题效果参考 #

可直接复用的修复代码 #

将原有CSS替换为以下版本即可实现内容自适应排布，无溢出问题：

.card_container{
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    justify-content: center;
}


.card{
    display: flex;
    width: 35rem;
    max-height: 60rem;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.9);
    border-radius: 1rem;
    text-align: center;
    /* 裁剪溢出内容，同时适配圆角边界 */
    overflow: hidden;
    
    ul{
        padding: 0;
        margin: 1rem 0;
        list-style: none;
        display: flex;
        align-items:center;
        justify-content:space-evenly;
    
        li{
            font-size: 2.2rem;
            color: rgb(52, 52, 54);
        }
    
    }
   
}

.card_header{
    /* 固定头部高度，避免图片无约束撑高 */
    height: 22rem;
 
    img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        /* 图片裁剪铺满，不变形 */
        object-fit: cover;
    }
}

.card_body{
    /* 核心配置：自动填充剩余高度，允许收缩 */
    flex: 1;
    min-height: 0;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;

    .property_description{
        margin: 0;
        line-height: 1.5;
        /* 长描述截断为3行，避免撑爆布局 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


.card_footer{
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 0 1rem 1.5rem;
   
}

.price{
    font-size: 2rem;
    font-weight: 700;
    /* 价格自动靠内容区底部对齐 */
    margin-top: auto;
}

可选调整 #

如果不需要截断长描述，可以去掉.property_description的截断样式，给.card_body加overflow-y: auto，内容过多时会在卡片内部出现滚动条，不会溢出到卡片外。

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