如何解决卡片内容溢出？Web开发新手的响应式卡片求助

问题说明 #

我是Web开发新手，实现响应式卡片时遇到小屏幕下内容溢出的问题，期望所有内容在任意屏幕尺寸下都被限制在背景范围内。

问题根源 #

1. .services-list 设置了 position: absolute 脱离文档流，导致父容器无法感知其高度，同时 display: flex 让列表横向排列，小屏幕下超出容器边界
2. .card-back 和 .card-white 硬编码固定宽度 550px，小屏幕下该宽度远超容器可用宽度
3. 媒体查询逻辑倒置：仅在屏幕≥750px时才调整宽度，小屏幕反而保留固定宽，完全不符合响应式需求

修复后的完整代码 #

CSS 代码 #

#services-card {
    background-color: lightgreen;
    padding: 7% 15%;
    text-align: center;
    font-family: "Ubuntu";
}
.card {
    background-color: lightgreen !important;
}
.services-list {
    text-align: left;
    list-style: none;
    font-size: 1.2em; /* 小屏幕基础字号适配 */
    overflow: hidden;
    /* 移除脱离文档流和横向排列的设置，恢复正常列表布局 */
    position: static;
    display: block;
}
.services-cards-para {
    padding-bottom: 10px;
}
.card-back {
    background-color: #55F007;
    width: 100%; /* 自适应容器宽度 */
    min-height: 70px; /* 用最小高度替代固定高度，内容溢出时自动撑开 */
    display: flex;
    align-items: center; /* 内容垂直居中 */
}
.card-white {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
}
.card-back:hover{
    font-weight: bold;
    color: #e60073;
    box-shadow: 10px 10px 5px red;
}
.card-white:hover{
    font-weight: bold;
    color: #e60073;
    box-shadow: 10px 10px 5px red;
}
/* 大屏幕下恢复原字号和布局 */
@media(min-width: 750px) {
    .services-list {
        font-size: 1.5em;
    }
    .card-back, .card-white {
        padding-bottom: 0.5em;
    }
}

HTML 代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- 补充图标库链接 -->

<section id="services-card">
    <h2>Our Services</h2>
    <p class="services-cards-para">Simple and affordable price plans for you.</p>
    <div class="row">
        <div class="col-lg-6 mb-4 mb-lg-0"> <!-- 小屏幕下卡片添加底部间距 -->
            <div class="card border-0">
                <div class="card-body">
                    <ul class="services-list p-0">
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> GST</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Income Tax</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> TDS Returns</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Food License (FSSAI)</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Labour License</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Trade License</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Digital signature</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card border-0">
                <div class="card-body">
                    <ul class="services-list p-0">
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3">Import Export Code</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> PAN / TAN</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> Firm Registration</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3">Company / LLP Incorporation</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> PF & ESI</span></li>
                        <li class="pl-3 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> MSME / Udyam Regn</span></li>
                        <li class="pl-3 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-3"> DIN</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

关键修改说明 #

• 恢复列表正常文档流布局，确保父容器能包裹内容
• 将卡片项宽度改为自适应，避免固定宽度溢出
• 调整内边距和字号，适配小屏幕显示
• 补充缺失的图标库依赖，确保箭头图标正常显示
• 优化小屏幕下卡片间距，提升视觉体验

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