Столбец Bootstrap, который переносится на вторую строку, выравнивается по дну и оставляет большой пробел. Как мне устранить этот пробел?

Question

У меня установлен контейнер полной высоты с двумя строками:

<div class="container-fluid d-flex flex-column h-100">
  <div class="row flex-grow-1">
    <div class="col-auto" style="min-width:200px;height:200px;">
      Some sort of fixed-size logo
    </div>
    <div class="col" style="min-width:500px;max-width:800px">
      <p>Main content that wraps when viewport width is too small.</p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      Footer content
    </div>
  </div>
</div>

Если экран слишком узкий и столбец 2 находится под столбцом 1, почему столбец 2 выравнивается по дну?

https://jsfiddle.net/t2joybvh/2/

Answer 1

Удалить d-flex из контейнера-жидкости. Это оправдывает контент на экранах меньшего размера с помощью контейнера полной высоты.

Вот пример работы с экранами меньшего размера: https://www.codeply.com/p/A6mbqfsMnB