Имея как растяжение, так и вертикальное выравнивание по центру с Bootstrap и flex?

Question

У меня есть два деления. Один с верхним и нижним отступом, а другой должен наследовать этот отступ / высоту. Я знаю, что у flex есть опция stretch. Но мне также нужно, чтобы элементы внутри этого второго div были центрированы вертикально. Тем не менее, я не могу заставить его работать. Я использую Bootstrap 4, и это примерная схема моего HTML:

.row {
  border: 1px solid black;
}

.first {
  background: red;
  padding-top: 25px;
  padding-bottom: 25px;
}

.second {
  background: green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row no-gutters align-items-stretch">
    <div class="col-md-6 first align-items-center">
      <h1 class="mb-0">Text goes here</h1>
    </div>
    <div class="col-md-6 second align-items-center">
      <h5 class="mb-0">Text goes here</h5>
    </div>
  </div>
</div>

Как видите, я использовал align-items-stretch на row и пытался выровнять элементы по вертикали, используя align-items-center, ноэто очевидно ничего не делает. Что я пропускаю / делаю неправильно? Может кто-нибудь, пожалуйста, взгляните?

Спасибо!

Answer 1

Кажется, что у вашего второго div нет поведения "flex", чтобы заставить его работать. При желании вы можете добавить: "align-items", чтобы принудительно вызвать его.

.second {
    display: flex;
    align-items: center; // if not working by itself
}