Блог

Главная - Вопросы по программированию - Высота дочернего элемента сетки = 100% Ведет себя по-разному в Safari по сравнению с Хром

Высота дочернего элемента сетки = 100% Ведет себя по-разному в Safari по сравнению с Хром

#google-chrome #safari #height #overflow #css-grid

Вопрос:

Пытаюсь сделать что — то теоретически очень простое — использовать display: grid фиксированную строку заголовка и прокручиваемую строку содержимого, — но получаю совершенно разные результаты в Chrome и Safari. Сведено к основной проблеме:

Код:

 <html>
<body>
    <div id="root" style="background: gray; height: 100%; width: 100%; overflow: hidden">
        <div id="grid" style="height: 100%; width: 100%; display:grid; grid-template-rows: auto 1fr; height: 100%">

            <div id="row1" style="width: 100%; height: 100px; background: green; grid-row: 1">
            </div>

            <div id="row2-container" style="width:100%; height: 100%; max-height:100%; grid-row: 2; overflow: auto">
                <div id="row2-content" style="width: 100%; height: 10000px; background: blue; overflow: visible">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Хром (хорошо):

введите описание изображения здесь

Сафари (плохо):

введите описание изображения здесь

В случае, если проблема не очевидна , в Safari row2-container растет, чтобы соответствовать своему дочернему, а не доступному пространству в строке 2 родительского grid , и, таким образом, не прокручивает переполнение row2-content . Другими словами, кажется height: 100% grid , что дети игнорируются, если размер строки равен 1fr .

Как я могу получить то, что я хочу, как в Safari, так и в Chrome? Спасибо!

Ответ №1:

Проблема, похоже, была исправлена в Safari 14. Я использовал 13.

Также настройка row2-container height: auto , похоже, дает желаемый результат, даже в Safari 13. В любом случае, это, похоже, было ошибкой до версии 14, которая теперь исправлена.

Метки: