Гибкий элемент внутри другого гибкого элемента разрушается в Safari

#html #css #flexbox #safari

#HTML #css — код #гибкий ящик #safari #css #flexbox

Вопрос:

Я получил этот код, работающий в Chrome, где содержимое первого гибкого элемента должно быть выровнено по низу и при необходимости растягивается:

 body {
  height:100vh;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.flex-container {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-item {
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  flex: 0 1 auto;
}

.flex-stretch {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
}

 <div class="flex-container">
  <div class="flex-item flex-stretch">1</div>
  <div class="flex-item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
  <div class="flex-item">3</div>
</div>

но в Safari он не учитывает содержимое первого гибкого элемента и сворачивается, если область просмотра меньше гибкого контейнера и требуется прокрутка.

Есть ли какая-то работа по решению этой проблемы?

Спасибо, это мой первый вопрос здесь 🙂

Вот кодовое имя: https://codepen.io/felphos/pen/GRZVKwY

1. Вы установили flex-shrink значение 1 в flex-stretch стилях класса. Попробуйте flex: 1 0 auto или дайте ему min-height значение, ниже которого он не должен сжиматься.

2. Я не могу установить минимальную высоту, потому что это зависит от содержимого этого div, и мне также нужно, чтобы этот div уменьшался или увеличивался в соответствии с оставленным пространством. Если вы запустите фрагмент кода и нажмете на полную страницу, вы сможете увидеть желаемое поведение, когда есть место для увеличения div, в Chrome, очевидно 🙂

3. Я «решил» это с помощью JavaScript, где у меня есть div с содержимым внутри .flex-stretch div, и если высота этого div равна>= высоте .flex-stretch div, я меняю отображение .flex-stretch на block вместо flex. Пока все в порядке, но я бы хотел решить это с помощью CSS.

Ответ №1:

Поскольку вы используете flexbox, вы не должны определять высоту явно. Я думаю, что удаление height: "100%" , а также установка .flex-stretch{flex: 1 0 auto;} (0 flex-shrink) даст вам то, что вы хотите.