Bootstrap column that wraps to second line aligns to bottom and leaves a large gap. How do I remove this gap?

I have a full-height container set up with two rows:

<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>

When the screen is too narrow and column 2 wraps underneath column 1, why does column 2 align to the bottom?

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

Remove d-flex from container-fluid. It is justifying the content on smaller screens with your full height container.

Here's an example working on smaller screens: https://www.codeply.com/p/A6mbqfsMnB