Flexbox колонка вертикальное пространство между не работает

Question

Как сделать интервал между вертикальным контентом?В примере, в третьем столбце, я ожидаю, что смогу выровнять контент между красными и черными divs БЕЗ указания высоты (в данный момент это делается для примера).Не могу ли я сделать это без него, так как у нас уже есть максимальная высота от среднего столбца?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
  <div class="col-auto">
    <div>asdqwd</div>
  </div>
  <div class="col d-flex flex-column text-center">
    <div>rgergre</div>
    <div>vs</div>
    <div>rger ergerg</div>
  </div>
  <div class="col-auto d-flex flex-column justify-content-between" style="height:72px">
    <div style="height:20px;width:20px;background:red">ewf</div>
    <div style="height:20px;width:20px;background:black">qwd</div>
  </div>
</div>

https://jsfiddle.net/xmkrt21j/2/

Answer 1

Центр выравнивания предметов сбрасывает его на .d-flex align-items-center

Два варианта:

1) Добавьте align-self: stretch к третьему согнутому блоку.

2) Удалить align-items: center и добавить align-self: center к первому блоку.