如何解决Bootstrap列（col）设置70vh高度后的内容溢出问题？

为col元素设置70vh高度后，第三列因内部嵌套col元素出现高度计算问题，第一个子col内的内容被隐藏。相关代码如下：

原HTML代码 #

<section id="fitness-program" class="container py-5" data-aos="fade-up">
<div class="row justify-content-center gap-3 d-flex align-items-stretch">
    <div class="col mb-4 p-5 rounded d-flex flex-column align-items-center text-center hid" data-aos="fade-up" style="background: #28A745;">
        <h3 class="text-white">Start Your Fitness Journey Today with Us</h3>
        <a class="nav-link active bg-white fw-normal mx-1 px-4 py-2 rounded-pill mb-5" aria-current="page" href="#">Get Started<i class="bi bi-chevron-right ms-2"></i></a>
        <img src="assets/fitness/start.png" class="img-fluid w-75" data-aos="fade-up">
    </div>
    <div class="col mb-4 bg-dark-gray rounded d-flex flex-column" data-aos="fade-up" style="height: 70vh;">
        <img src="assets/fitness/training.png" class="img-fluid w-100" data-aos="fade-up">                
        <h3 class="mb-4 px-4">Our Expert Trainers<b> will guide you to achieve your goals</b></h3>
        <p class="px-4">Join our program and experience personalized training sessions that will help you stay fit and motivated. Our trainers are here to support you every step of the way.</p>
    </div>
    <div class="col mb-4 d-flex flex-column align-items-center text-center" data-aos="fade-up" style="height: 70vh;">
        <div class="col bg-dark-gray rounded">
            <img src="assets/fitness/tracker.png" class="img-fluid w-100" style="height: 25vh;" data-aos="fade-up">
            <h4 class="text-center w-100 mb-4 px-5 py-3"><b>Track Your Progress</b><br>easily with our mobile app</h4>
        </div>
        <div class="col mt-5 bg-dark-gray rounded p-4" data-aos="fade-up">
            <img src="assets/fitness/success.png" class="img-fluid" alt="">
        </div>
    </div>
</div>

原CSS代码 #

.hid {
    height: 70vh;
    overflow: hidden;
}

#fitness-program .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Hide overflow */
    height: 70vh; 
}

#fitness-program .col > div {
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

#fitness-program .col .bg-dark-gray {
    border-radius: 0.5rem;
}

#fitness-program .col .bg-dark-gray:nth-of-type(1) {
    height: 25vh; 
    margin-bottom: 1rem;
}

#fitness-program .col .bg-dark-gray:nth-of-type(2) {
    height: auto; 
}

核心问题是第三列内部直接使用Bootstrap原生col类，该类自带的flex属性与父容器的高度限制冲突，加上固定vh高度和外边距设置，导致内容超出父容器被截断。

修复要点 #

• 将内部的col类替换为自定义类（如col-inner），避免与Bootstrap全局col样式冲突
• 用flex布局分配父容器空间，替代固定vh高度设置（嵌套场景下vh基于视口，会与父容器70vh限制冲突）
• 用flex容器的gap属性替代子元素的margin-top，避免额外高度占用

修改后的代码 #

HTML代码

<section id="fitness-program" class="container py-5" data-aos="fade-up">
<div class="row justify-content-center gap-3 d-flex align-items-stretch">
    <div class="col mb-4 p-5 rounded d-flex flex-column align-items-center text-center hid" data-aos="fade-up" style="background: #28A745;">
        <h3 class="text-white">Start Your Fitness Journey Today with Us</h3>
        <a class="nav-link active bg-white fw-normal mx-1 px-4 py-2 rounded-pill mb-5" aria-current="page" href="#">Get Started<i class="bi bi-chevron-right ms-2"></i></a>
        <img src="assets/fitness/start.png" class="img-fluid w-75" data-aos="fade-up">
    </div>
    <div class="col mb-4 bg-dark-gray rounded d-flex flex-column" data-aos="fade-up" style="height: 70vh;">
        <img src="assets/fitness/training.png" class="img-fluid w-100" data-aos="fade-up">                
        <h3 class="mb-4 px-4">Our Expert Trainers<b> will guide you to achieve your goals</b></h3>
        <p class="px-4">Join our program and experience personalized training sessions that will help you stay fit and motivated. Our trainers are here to support you every step of the way.</p>
    </div>
    <div class="col mb-4 d-flex flex-column align-items-center text-center gap-3" data-aos="fade-up" style="height: 70vh;">
        <!-- 替换内部col为自定义类col-inner -->
        <div class="col-inner bg-dark-gray rounded d-flex flex-column">
            <img src="assets/fitness/tracker.png" class="img-fluid w-100" data-aos="fade-up">
            <h4 class="text-center w-100 mb-4 px-5 py-3"><b>Track Your Progress</b><br>easily with our mobile app</h4>
        </div>
        <div class="col-inner bg-dark-gray rounded p-4 d-flex justify-content-center align-items-center" data-aos="fade-up">
            <img src="assets/fitness/success.png" class="img-fluid" alt="">
        </div>
    </div>
</div>

CSS代码

.hid {
    height: 70vh;
    overflow: hidden;
}

#fitness-program .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    height: 70vh; 
}

/* 自定义内部容器样式 */
#fitness-program .col-inner {
    width: 100%;
    flex: 1; /* 自动分配父容器剩余空间 */
    display: flex;
    flex-direction: column;
}

#fitness-program .bg-dark-gray {
    border-radius: 0.5rem;
    overflow: hidden; /* 防止内部内容溢出 */
}

#fitness-program .col-inner img {
    flex-shrink: 0; /* 避免图片被压缩 */
    object-fit: cover; /* 保持图片比例并填充容器 */
}

额外说明 #

• gap-3替代mt-5，通过flex容器的间距控制避免额外高度占用
• 内部容器设置flex:1，让两个子容器平分父容器70vh高度（减去gap间距）
• 图片添加object-fit: cover，保证图片不变形且不超出容器边界

内容的提问来源于stack exchange，提问作者Yaren Yıldırım