如何防止网页卡片元素溢出？实现响应式缩放与自动换行

问题：页面缩小时卡片无法随页面自适应调整，会溢出页面，需要实现卡片随页面缩小且自动换行。

问题根源 #

你当前用固定margin值手动定位每个卡片（比如#one的margin-left:130px、#two的负margin-top），这种静态定位方式完全不具备响应性；另外你把flex布局的属性错误加在了单个卡片上，而非卡片的父容器，导致flex布局失效。overflow属性无效是因为它用来处理容器内部内容的溢出，而你的问题是卡片整体布局超出页面范围，不是内容溢出卡片。

解决方案 #

1. 重构HTML结构

给所有卡片添加统一的父容器，用来控制整体布局：

<header class="header">
    <ul class="Pages">
        <li><a href="HomePage.html">Home</a></li>
        <li><a href="ContentPage.html">Content</a></li>
        <li><a href="AboutPage.html">About</a></li>
    </ul>
    <a class="Pricing" href="PricingPage.html"><button class="pricingbut">Pricing</button></a>
</header>

<!-- 新增卡片父容器 -->
<div class="cards-container">
    <div class="card-wrap">
        <div class="card-header one">
            <i class="fas fa-code"></i>
        </div>
        <div class="card-content">
            <h1 class="card-title">Title</h1>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#"><button class="card-btn one">get</button></a>
        </div>
    </div>

    <div class="card-wrap">
        <div class="card-header two">
            <i class="fab fa-css3-alt"></i>
        </div>
        <div class="card-content">
            <h1 class="card-title">Title</h1>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#"><button class="card-btn two">get</button></a>
        </div>
    </div>

    <div class="card-wrap">
        <div class="card-header three">
            <i class="fab fa-html5"></i>
        </div>
        <div class="card-content">
            <h1 class="card-title">Title</h1>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#"><button class="card-btn three">get</button></a>
        </div>
    </div>
    <div class="card-wrap">
        <div class="card-header four">
            <i class="fab fa-js-square"></i>
        </div>
        <div class="card-content">
            <h1 class="card-title">Title</h1>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#"><button class="card-btn four">get</button></a>
        </div>
    </div>
</div>

2. 修改CSS样式

• 删除所有#one、#two、#three、#four的手动定位样式
• 给父容器添加flex布局规则，实现自适应换行
• 调整单个卡片的样式，移除无效的flex属性

修改后的完整CSS：

@font-face {
    font-family: 'LemonMilkMed';
    src: url(LemonMilkMed.ttf);
}

@font-face {
    font-family: 'PoppinMed';
    src: url(Poppins-Medium.ttf);
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #262626, #303030);
    background-size: 100%;
}

li, a, button {
    font-family: 'LemonMilkMed', sans-serif;
    font-size: 16px;
    color: #FCFBF8;
    text-decoration: none;
    font-weight: 100;
}
 header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 5%;
    background-color: rgb(55, 55, 55);
    border: none;
    padding: 8px;
    background-size: 100px 90px;
    text-shadow: #a1a1a1;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
 }

 .Pages {
    list-style: none;
    text-align: center;
    align-content: center;
 }

 .Pages li a {
    transition: all 0.3s ease 0s;
 }

 .Pages li a:hover {
    color: #0082a2; 
}

.pricingbut {
    margin-left: 30px;
    padding: 9px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer; 
    transition: all 0.3s ease 0s;
    background: #d74256;
    box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}

.pricingbut:hover {
    background: #ca3e51;
    box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}

.Pages {
    list-style: none;
    word-spacing: 25px;
    justify-content: center;
}

.Pages li {
    display: inline-block;
}

.Pages li a {
    transition: all 0.3s ease 0s;
}

.Pages li a:hover {
    color: #ff6675;
}

.header h1 {
    font-family: 'LemonMilkMed';
    color: #FCFBF8;
    text-align: center;
    font-size: 20px;
    text-shadow: #a1a1a1;
}

.header {
    padding: 10px 30px;
}

@font-face {
    font-family: 'PoppingMed';
    src: url(Poppins-Medium.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    --color-text: #616161;
    --color-text-btn: #eeeeee;
    --card1-gradient-color1: #f12711;
    --card1-gradient-color2: #f5af19;
    --card2-gradient-color1: #7F00FF;
    --card2-gradient-color2: #E100FF;
    --card3-gradient-color1: #3f2b96;
    --card3-gradient-color2: #a8c0ff;
    --card4-gradient-color1: #11998e;
    --card4-gradient-color2: #38ef7d;
}

/* 卡片父容器：实现自适应换行与居中 */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 100px 20px;
    justify-content: center;
}

.card-wrap {
    width: 220px;
    min-width: 200px; /* 小屏幕下保留最小宽度，避免过度压缩 */
    background: #262626;
    border-radius: 20px;
    border: 5px solid #363636;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
                rgba(0, 0, 0, 0.23) 0px 6px 6px;
    font-family: 'Roboto', sans-serif;
    transition: all 0.4s ease;
}
.card-wrap:hover {
    transform: scale(1.05);
}
.card-header {
    height: 200px;
    width: 100%;
    background: red;
    border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
    display: grid;
    place-items: center;
}

.card-header i {
    color: #fff;
    font-size: 72px;
}
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}
.card-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
  
}
.card-text {
    text-align: center;
    font-size: 12px;
    margin-bottom: 20px;
    color: #979797;
}
.card-btn {
    transition: all 0.4s ease;
    border: none;
    border-radius: 100px;
    padding: 5px 30px;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.card-header.one {
    background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
    background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
    background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
    background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one {
    background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
    background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-btn.three {
    background: linear-gradient(to left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-btn.four {
    background: linear-gradient(to left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one:hover {
    opacity: 80%;
}
.card-btn.two:hover {
    opacity: 80%;
}
.card-btn.three:hover {
    opacity: 80%;
}
.card-btn.four:hover {
    opacity: 80%;
}

效果说明 #

• 父容器的flex-wrap: wrap会在屏幕宽度不足时自动让卡片换行
• justify-content: center保证卡片始终居中排列
• gap:30px统一控制卡片间距，比手动设置margin更稳定
• min-width避免小屏幕下卡片被压缩过窄，保留可读性

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