Бутстрэп 4 колонки не достигают 100% высоты

Question

Я использую Bootstrap 4 и заметил, что мои столбцы не достигают 100% высоты строки.

Я предполагал, что для Bootstrap 4 характерно то, что высота столбца всегда равна высоте строки, как видно в этом рабочем примере: http://demo.tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid/?5-column-height

Почему-то я не могу дать такой же результат. Я пытался использовать:

• класс align-items-stretch в строке
• высота: 100% по столбцам
• flex: 1 с дисплеем: flex и flex-direction: column

Мне было интересно, может ли кто-нибудь объяснить правильный метод настройки, чтобы столбцы Bootstrap 4 достигли 100% высоты строки.

(просмотр на полной странице для точного представления)

.row {
  border: 1px solid green;
}

.our-research {
  padding: 40px 0;
}

.our-research__container {
  height: 100%;
  border: 1px solid blue;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.our-research__content {
  background-color: #fff;
  text-align: center;
  padding: 30px 35px;
  color: #999;
  height: 100%;
  font-weight: 500;
  flex: 1;
  border: 1px solid red;
  border-bottom-right-radius: 50px;
  display: flex;
  flex-direction: column;
}

.our-research__image {
  position: relative;
  height: 175px;
}

.our-research__image .our-research__image-main {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<section class="our-research bg--light-grey">
  <div class="container">
    <div class="row align-items-stretch">
      <div class="col-10 col-sm-3 our-research__container">
        <div class="our-research__image">
          <img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
        </div>

        <div class="our-research__content">
          <h3 class="centered-heading__purple">Title</h3>
          <p>Suspendisse arcu dui commodo non ornare sed consequat</p>
        </div>
      </div>

      <div class="col-10 col-sm-3 our-research__container">
        <div class="our-research__image">
          <img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
        </div>
        <div class="our-research__content">
          <h3 class="centered-heading__purple">Tumor Bank</h3>
          <p>Suspendisse arcu dui commodo non ornare sed consequat</p>
        </div>
      </div>

      <div class="col-10 col-sm-3 our-research__container">
        <div class="our-research__image">
          <img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
        </div>
        <div class="our-research__content">
          <h3 class="centered-heading__purple">Research</h3>
          <p>Suspendisse arcu dui commodo non ornare sed consequat</p>
        </div>
      </div>

      <div class="col-10 col-sm-3 our-research__container">
        <div class="our-research__image">
          <img class="our-research__image-main" src="http://via.placeholder.com/350x150" alt="">
        </div>
        <div class="our-research__content">
          <h3 class="centered-heading__purple">Title</h3>
          <p>Suspendisse arcu dui.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Я создал jsfiddle своей проблемы здесь: https://jsfiddle.net/eilawen/zjoeh0yp/12/

Любая помощь будет оценена.

Answer 1

Удалить высоту из нашего-исследовательского контейнера.

.our-research__container {         
     border: 1px solid blue;
     flex: 1;
     display: flex;
     flex-direction: column;
}