Tengo esta situación:https://jsfiddle.net/johnsam/rdtva2fq/

EnCromo funciona bien, mira esto:

Comienza (vea "PRIMERO" y "ÚLTIMO" btn). Bueno.

EnSafari no lo hace (también con iPad / iPhone, es lo mismo) ve esto:

"PRIMERO" btn OK, "ÚLTIMO" un nop. ¡La página tiene una barra de desplazamiento que es lo que no quiero!

Si elimino la parte del encabezado, funciona bien, así que supongo que Safari no reconoce el (height: 100vh MENOS la parte del encabezado de esa altura) tal vez. ¿Estoy en lo cierto?

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>