Flexbox, strange behaviour with CSSGrid

问题

I have this situation: https://jsfiddle.net/johnsam/rdtva2fq/

On Chrome it works good, see this:

It start (see "FIRST" and "LAST" btn). Good.

On Safari it doesn't (also with iPad/iPhone, it's the same) see this:

"FIRST" btn OK, "LAST" one nope. The page has a scrollbar that is what I don't want!

If I remove the header part it works good, so my guess is Safari doesn't recognize the (height: 100vh MINUS the header part of that height) maybe. I'm right?

Code:

<div class="my-all d-flex flex-column height100">
  <div class="container-fluid" style="background: red;">
    <div class="row">
      <div class="col-12 my-5">
        Test space long long long
      </div>
    </div>
  </div>
  <div class="my-main d-flex height100" style="background: cyan;">
    <div class="container-fluid d-flex media-body">
      <div class="row my-row my-3">
        <div class="col-6 my-grid">
          <a class="btn btn-secondary my-btn">
            <span>FIRST</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/44025290/flexbox-strange-behaviour-with-cssgrid