移动端scrollable cards高度无法随内容自适应的修复咨询

问题现象 #

默认状态：

点击「查看更多」后：

核心问题：触发查看更多功能后，卡片高度无法随展开的内容自动增长，内容被限制在固定高度的滚动容器内，布局错乱。

问题根源 #

• 滚动容器设置了固定高度：.scrolling-wrapper的height: 474px锁死了容器高度，无法适配内部卡片的高度变化
• 卡片内容使用绝对定位：.card-content的position: absolute让内容脱离文档流，卡片无法感知内容高度，自然无法自适应
• 卡片缺少基础内边距：顶部头像用了绝对定位，但卡片没有预留足够的内边距，同时内容展开时没有底部空间

修复步骤 #

1. 移除滚动容器的固定高度 #

删掉.scrolling-wrapper的固定高度，让容器自适应卡片高度，同时调整顶部内边距适配头像偏移：

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    /* 移除固定高度，改为自适应 */
    /* height: 474px; */
    width: 100%;
    padding-inline: 40px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 0;
    padding-top: 120px; /* 适配头像的绝对定位偏移 */
    visibility: visible;
}

2. 取消卡片内容的绝对定位 #

把.card-content的绝对定位移除，让内容回到文档流，这样卡片才能感知内容高度：

.card-content {
    /* 移除绝对定位 */
    /* position: absolute; */
    padding-top: 0; /* 不需要额外顶部内边距，卡片已经预留了头像空间 */
    padding-inline: 20px; /* 统一设置内容左右内边距 */
    padding-bottom: 20px; /* 给底部内容留空间 */
}

3. 调整卡片基础样式 #

给卡片添加顶部内边距，容纳绝对定位的头像，同时让卡片高度随内容自动计算：

.card {
    width: 100%;
    flex: 0 0 auto;
    background-color: green;
    border-radius: 20px;
    position: relative;
    margin-inline-end: 10px;
    padding-top: 80px; /* 容纳140px高的头像（偏移-66px） */
}

4. 优化头像居中方式 #

把头像的left:29%改成left:50% + transform: translateX(-50%)，确保在不同屏幕尺寸下都能居中：

.our-member-owner-card-image {
    position: absolute;
    top: -66px;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

5. 完善「查看更多」交互（可选） #

添加JS逻辑控制内容显示隐藏，同时触发容器重排确保高度自适应：

document.querySelectorAll('.read-more').forEach(btn => {
    btn.addEventListener('click', function() {
        const moreContent = this.previousElementSibling;
        const isHidden = moreContent.style.display === 'none' || moreContent.style.display === '';
        
        moreContent.style.display = isHidden ? 'inline' : 'none';
        this.textContent = isHidden ? '收起' : '查看更多';
        
        // 强制滚动容器重排，确保高度自适应
        const wrapper = document.querySelector('.scrolling-wrapper');
        wrapper.style.height = 'auto';
        void wrapper.offsetHeight; // 触发浏览器重绘
    });
});

修改后的完整代码 #

CSS #

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-inline: 40px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 0;
    padding-top: 120px;
    visibility: visible;
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none;
}

.card {
    width: 100%;
    flex: 0 0 auto;
    background-color: green;
    border-radius: 20px;
    position: relative;
    margin-inline-end: 10px;
    padding-top: 80px;
    padding-bottom: 20px;
}

.our-member-owner-card-image {
    position: absolute;
    top: -66px;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

.card-content {
    padding-top: 0;
    padding-inline: 20px;
}

.member-detail {
    line-height: 1.7;
    text-align: center;
}

.member-detail h3 {
    color: #263244;
    font-weight: 700;
    font-family: "Lato";
    margin: 0 0 8px;
}

.member-detail p {
    color: #737c89;
    margin: 0;
}

.member-description {
    color: #263244;
    line-height: 1.6;
    padding-top: 9px;
    font-weight: 500;
    font-size: 16px;
}

.member-description .read-more {
    color: #eb644c;
    text-decoration: underline;
    cursor: pointer;
}

HTML #

<div class="scrolling-wrapper">
    <div class="card">
        <div class="our-member-owner-card-image">
            <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
        </div>
    
        <div class="card-content">
            <div class="member-detail">
                <h3 id="mobile-member-name">Mr bean</h3>
                <p id="mobile-member-designation">Actor</p>
            </div>
            <div class="member-description">
                <span id="mobile-member-description">
                    Mr Bean has extensive work experience during his career of more than 25 years in the film industry.
                </span>
                <span id="mobile-more" style="display:none;">Some dummy text, more content here to test the height adaptation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                <span id="mobile-member-description-readmore" class="readMoreLink read-more">查看更多</span>  
            </div>
        </div>
    </div>
    <div class="card">
        <div class="our-member-owner-card-image">
            <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
        </div>
        <div class="card-content">
            <div class="member-detail">
                <h3 id="mobile-member2-name">Mr bean</h3>
                <p id="mobile-member2-designation">Actor</p>
            </div>
            <div class="member-description">
                <span id="mobile-member2-description">
                 Mr Bean has extensive work experience during his career of more than 25 years in the film industry
                </span>
                <span id="mobile-more2" style="display:none;">Another dummy text block to show the card height adapts. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span>
                <span id="mobile-member2-description-readmore" class="readMoreLink read-more">查看更多</span>
            </div>
        </div>
    </div>    
</div>

JavaScript #

document.querySelectorAll('.read-more').forEach(btn => {
    btn.addEventListener('click', function() {
        const moreContent = this.previousElementSibling;
        const isHidden = moreContent.style.display === 'none' || moreContent.style.display === '';
        
        moreContent.style.display = isHidden ? 'inline' : 'none';
        this.textContent = isHidden ? '收起' : '查看更多';
        
        const wrapper = document.querySelector('.scrolling-wrapper');
        wrapper.style.height = 'auto';
        void wrapper.offsetHeight;
    });
});

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