Eu tenho esta situação:https://jsfiddle.net/johnsam/rdtva2fq/

Emcromada funciona bem, veja o seguinte:

Começa (consulte "PRIMEIRO" e "ÚLTIMO" btn). Boa.

EmSafári não (também com iPad / iPhone, é o mesmo) vê isso:

"PRIMEIRO" btn OK, "ÚLTIMO" um não. A página tem uma barra de rolagem que é o que eu não quero!

Se eu remover a parte do cabeçalho, ela funcionará bem, então acho que o Safari não reconhece o (height: 100vh Menos a parte do cabeçalho dessa altura) talvez. Eu estou certo?

Código:

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