Mobile Safari и Bootstrap 4 Высота содержимого столбца 100% Не соблюдается

Question

Я использую Bootstrap 4 на моей веб-странице, которая использует макет сетки бутстрапа в режиме flex.

В одной из столбцов у меня есть кнопка, которую я хочу заполнить. Это делается путем установки кнопки на 100% высоты с помощью CSS.

Это работает без проблем во всех браузерах, кроме Safari, где оно, кажется, игнорируется.

HTML, я использую выглядит следующим образом:

<div class="container"> 
    <div class="row"> 
     <div class="col-10"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. 
     </div> 
     <div class="col-1"> 
      <button class="btn btn-primary" type="button">Lorem ipsum</button> 
     </div> 
    </div> 
</div> 

В дополнении к обычному загрузочному коду я добавил следующие CSS:

button { height: 100%; } 

Вот codepen пример, который показывает проблему http://codepen.io/anon/pen/BppMvw

Есть ли у кого-нибудь предложения о том, как это решить? Поскольку другие столбцы в строке могут иметь переменную высоту, мне невозможно установить фиксированную высоту. Javascript тоже не вариант.

Answer 1

Решение может заключаться в том, чтобы установить на кнопку кнопку flex:1 и сделать ее родитель гибким контейнером. See here.