Блог

Я использую метод создания дочернего элемента на 100% выше его родительского элемента, который чаще всего задается в ответах StackOverflow, а именно относительное позиционирование родительского элемента, а затем предоставление дочернему элементу этих стилей:

 position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
  

Но, пожалуйста, взгляните на эту реализацию Codepen выше. В нем я делаю родительский элемент гибким элементом, а дочерний элемент таблицей (или <div> с display: table помощью ). Мне нужно сделать это для реального случая проектирования моего клиента, частично для выравнивания текста по вертикали посередине, что, я считаю, могут делать только таблицы.

Как вы можете видеть, он ломается в Safari. Но похоже, что CSS должен работать, и это работает в Chrome. Почему он ломается в Safari? Как я могу это исправить?

PS: Я открыт для альтернативных подходов к созданию дочернего элемента на 100% высотой его родительского элемента flex, если это необходимо.

Если вы создадите родительский дисплей: flex; flex-direction: column; и дочерний flex-grow:1; это должно сработать.

 <div class="parent">
  <div class="child">
      Content
  </div>
</div>
  

 .parent{
  display:flex;
  flex-direction: column;
  background:blue;
  height: 300px;
}

.child{
  flex-grow:1;
  background:red;
  display:flex;
  align-items:center;
}
  

Проверьте этот код