Как сделать эти столбцы фиксированной высотой?

Question

Я создал этот полноразмерный раздел, используя Bootstrap 4. На большом экране они выглядят нормально, но по мере того, как я уменьшаю размер экрана, высота столбцов не одинакова. Как я могу сделать их одинаковой высоты, чтобы это не повлияло, если один содержит больше контента, чем другой?

Вот что я вижу:

Я пытался добавить 100% высоту к классу services-3-box-wrapper. Любая помощь приветствуется.

#services-3 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#services-3 .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#services-3 .service-box-1 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-1 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-1 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-1 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-1 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-2 {
    background-color: #5eb8e4;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-2 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-2 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-2 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-2 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-3 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-3 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-3 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-3 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-3 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-4 {
    background-color: #5eb8e4;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-4 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-4 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-4 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-4 .sb-desc p {
    color: #ffffff;
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">

    <div class="container-fluid">

        <div class="row no-gutters">
            <!-- Service 1 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-1">
                        <div class="sb-icon d-flex justify-content-center">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Qualified Doctors</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 2 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-2">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-ambulance"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Emergency Services</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 3 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-3">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-procedures"></i>
                        </div>
                        <div class="sb-title">
                            <h5>In-patient care</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 4 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-4">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-user-nurse"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Friendly Staff</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>  

    </div>

</section>

Answer 1

Просто добавьте эти 2 правила в свой CSS, и это решит проблему.

  .services-3-box-wrapper {
     height: 100%;
  }
  div[class^="service-box"]{
    height: 100%;
  }

на самом деле дочерний элемент Flex автоматически имеет одинаковую высоту, но для внутренних элементов вы должны сделать это 100%, и вы поступали правильно, но вы должны убедиться, что div, которому вы задали цвет фона, должен иметь свойство 100% высоты, а также все его родители. Проверить это работает

#services-3 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#services-3 .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#services-3 .service-box-1 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-1 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-1 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-1 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-1 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-2 {
    background-color: #5eb8e4;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-2 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-2 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-2 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-2 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-3 {
    background-color: #199adb;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-3 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-3 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-3 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-3 .sb-desc p {
    color: #ffffff;
    text-align: center;
}


#services-3 .service-box-4 {
    background-color: #5eb8e4;
    padding-top: 35px;
    padding-bottom: 35px;
    padding-left: 45px;
    padding-right: 45px;
}

#services-3 .service-box-4 .sb-icon i {
    color: #ffffff;
    font-size: 40px;
}

#services-3 .service-box-4 .sb-title {
    margin-top: 20px;
}

#services-3 .service-box-4 .sb-title h5 {
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}

#services-3 .service-box-4 .sb-desc p {
    color: #ffffff;
    text-align: center;
}
.services-3-box-wrapper {
    height: 100%;
}
div[class^="service-box"]{
    height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services-3">

    <div class="container">

        <div class="row no-gutters">
            <!-- Service 1 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-1">
                        <div class="sb-icon d-flex justify-content-center">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Qualified Doctors</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 2 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-2">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-ambulance"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Emergency Services</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 3 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-3">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-procedures"></i>
                        </div>
                        <div class="sb-title">
                            <h5>In-patient care</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Service 4 -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
                <div class="services-3-box-wrapper">
                    <div class="service-box-4">
                        <div class="sb-icon d-flex justify-content-center">
                        <i class="fas fa-user-nurse"></i>
                        </div>
                        <div class="sb-title">
                            <h5>Friendly Staff</h5>
                        </div>
                        <div class="sb-desc">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit officiis error veniam praesentium saepe distinctio fuga doloremque ducimus rerum ad!</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>  

    </div>

</section>

пример.