Safari игнорирует абсолютную высоту дочернего элемента в гибком контейнере - PullRequest
Новая
       25

Safari игнорирует абсолютную высоту дочернего элемента в гибком контейнере

0 голосов
/ 23 октября 2019

У меня проблема с текущим проектом, в котором есть дочерний элемент внутри двух flex-контейнера (оба с flex-direction: column). Этот дочерний элемент имеет абсолютную высоту набора в пикселях, в то время как для элемента body задана высота 100vh.

Во всех браузерах, кроме Safari, мой дочерний элемент имеет высоту, установленную на нем. Safari - единственный браузер, который игнорирует высоту и отображает ребенка с максимальным значением 100vh от тела.

Это ошибка в Safari и есть ли обходной путь для этого?

Проблемав том, что это довольно сложный проект с множеством строк кода, который я не могу легко изменить. Поэтому я ищу решение, которое влияет только на сафари и имеет как минимум побочные эффекты. Рост ребенка будет устанавливаться с помощью javascript в зависимости от содержимого с помощью javascript.

Изменение высоты тела на минимальную высоту работает, но это было изменено в прошлом из-за других проблем. Удаление flex-direction тоже работает, но опять же это будет иметь нежелательные побочные эффекты на других частях страницы

Вот (сильно) урезанная версия проблемы: 

<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
<style>
body {
background-color: red;
display:flex;
flex-direction:column;
height:100vh;
}
#div1 {
display:flex;
flex-direction:column;
}
#div2 {
height:3060px;
background-color: green;
}
</style>
  </head>
  <body>
    <div id="div1">
        <div id="div2">Test content</div>
    </div>
  </body>
</html>

Iздесь я также создал jsFiddle https://jsfiddle.net/7jowr4v1/1/

Что я хочу заархивировать, так это то, что Safari ведет себя как все другие браузеры, имея div2 с высотой 3060px и показывая полосы прокрутки вместо уменьшения div.

...