Safari flex-grow поведение, отличное от Chrome / FF / Edge (css flexbox)

Question

Safari flex-grow поведение, отличное от Chrome / FF / Edge (css flexbox)

Я получаю различное поведение между Safari и Chrome / FF / Edge с помощью flex-grow. Я пытаюсь получить вертикальный центр, но safari дает больше фиксированного эффекта снизу.

Я использую flex-grow с десятичным числом, но Safari, похоже, интерпретирует его как целое значение.

HTML

<div class="fc">

  <div>Align Top</div>

  <div>Align Center</div>

  <div>Align Bottom</div>

  <div class="spacer">Bottom Spacer</div>

</div>

CSS

.fc { 

  height: 100%;

  width: 100%;

  background-color: darkBlue;

  color: gold;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

}



.fc div {

  outline: 2px dashed gold;

  padding: 15px;

  width: 200px;

  text-align: center;

}



.fc div:first-child {

  outline: 1px dashed salmon;

  padding: 15px;

  flex-grow: .5;

  opacity: .5;

}

Вот ручка: https://codepen.io/dmgig/pen/NvMKJW

Поведение задачи в Safari 10 (10.12)

Желаемое поведение в других браузерах

619 2

html css css3 flexbox

2 ответов:

Comments

Ничего не найдено.

LGSon · Accepted Answer · 2017-08-21 21:29:02

Если вы сделаете тело гибким контейнером, установите fc в flex-grow: 1 (и удалите height: 100%), он будет отображаться так, как вы хотите

Обновленный codepen

Фрагмент стека

html, body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 20px;
}
body {
  display: flex;
  flex-direction: column;
}

.fc { 
  flex-grow: 1;
  width: 100%;
  background-color: darkBlue;
  color: gold;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fc div {
  outline: 2px dashed gold;
  padding: 15px;
  width: 200px;
  text-align: center;
}

.fc div:first-child {
  outline: 1px dashed salmon;
  padding: 15px;
  flex-grow: .5;
  opacity: .5;
}

.fc div.spacer {
  outline: 1px dashed salmon;
  padding: 0;
  height: 60px;
  width: 200px;
  text-align: center;
  opacity: .5;
  padding: 15px;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 75px;
  width: 100%;
  background-color: salmon;
  color: darkBlue;
  opacity: .5;
  font-weight: bold;
}

<div class="fc">
  <div>Align Top</div>
  <div>Align Center</div>
  <div>Align Bottom</div>
  <div class="spacer">Bottom Spacer</div>
</div>

<div class="footer">
  footer
</div>

Вы также можете удалить position: fixed на footer и сделать его более отзывчивым

Обновленный codepen 2

dgig · Accepted Answer · 2017-08-21 22:03:53

Я нашел сообщение об ошибке здесь: https://github.com/philipwalton/flexbugs/issues/182
Он предлагает просто использовать процентную высоту на элементе и удалить flex-grow вообще, что действительно хорошо работает для этой цели.
.fc div:first-child {
  outline: 1px dashed salmon;
  padding: 15px;
  height: 25%;
  opacity: .5;
}