Рендеринг Flexbox не работает с последней версией Chrome
После обновления Chrome (73.0.3683.75) мой гибкий рендеринг полностью сломался.
Проблема известна и обсуждается здесь и здесь на СО, однако я не могу понять их исправление и заставить его работать в моем случае, так как я не очень хорошо знаю CSS и Flex.
я сделал плунжер, который повторяет проблему. Если вы откроете его в Safari, а затем в Chrome, вы заметите совсем другое поведение при изменении размера окна.
Что не так с моим кодом (который работал раньше)?
Вот две иллюстрации плункера:
Дисплей Safari (ОК)
Как видите, при изменении размера окна высота элементов статьи уменьшается, а общая высота остается равной 100% без переполнения. Это ожидаемое поведение.
Хромированный дисплей (НЕ ОК)
Но в новой версии Chrome высота элемента статьи не меняется при изменении размера окна, и создается полоса прокрутки.
<head>
<link data-require = "bootstrap@*" data-semver = "4.1.3" rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require = "bootstrap@*" data-semver = "4.1.3" src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "style.css" />
<script src = "script.js"></script>
</head>
<body>
<div class = "container-fluid h-100 pt-3 pb-3"
style = "background-color: green;">
<div class = "row h-100">
<div class = "col" style = "background-color: red;">
<div class = "h-100">
<div class = "row justify-content-center h-100">
<div class = "col u-hide-long-text h-100">
<div class = "list-group h-100 list-group-flush">
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
<a class = "list-group-item d-flex align-items-center justify-content-between list-group-item-action">article n°X</a>
</div>
</div>
</div>
</div>
</div>
</div
</div>
</body>
</html>
ПРИМЕЧАНИЕ. НЕ работает в последней версии Firefox.
Ответы 3
Пытаться:
.h-100 {
height: 100vh!important;
}
Проблема как-то связана с использованием height: 100%, если вы измените его на height: 100vh, это приведет к ожидаемому поведению.
Вроде работает, однако при добавлении заголовка в h-10 (и контента в h-90) результат не 100% и полоса прокрутки все равно есть. Вы можете взглянуть на этот обновленный плунжер? Спасибо.
Я считаю, что это связано с тем, что классы содержимого h-100 переопределяют класс родителя h-90. С процентами вы можете определить размер относительно первого родительского контейнера, который имеет display: relative. VH и VW относятся к области просмотра. `
Хорошо, спасибо за объяснение. Поскольку я использую много вложенных height: x% в своем проекте, думаю, на этот раз будет сложно использовать vh. Тем не менее, я не понимаю, что не так с моим текущим кодом.
используйте height:100%; на .list-group-item классе
.list-group{
height:100vh !important;
}
.list-group-item{
height:100%;
}
Это не работает при использовании заголовка (см. Другой ответ)
Элемент .col с background-color: red; переполнен. Добавьте к этим исправлениям класс h-100.
У вас недостающее звено в цепи. Добавьте
height: 100%или классh-100к.col. Объяснено в моем ответе здесь: stackoverflow.com/a/31728799/3597276