Модификация вложенного гибкого макета Chrome72, ваш веб-сайт может иметь нарушение макета

Chrome

источник

29 января 2019 года была выпущена официальная версия Chrome 72 (72.0.3626.81), которая принесла изменение, не упомянутое в журнале обновлений, из-за чего некоторые веб-сайты имели беспорядок в верстке. Это изменение в основном нацелено на вложенные гибкие макеты.Давайте посмотрим, что происходит.

вопрос

Во-первых, у нас есть вложенный гибкий макет со следующим кодом:

<style>
div {
    box-sizing: border-box;
}
.flex {
    display: flex;
    flex-direction: column;
}
.area {
    padding: 10px;
    height: 300px;
    width: 300px;
    background-color: #3fb9ab;
    color: #fff;
}
.item {
    padding: 10px;
    flex: 1;
    background-color: #158c7e;
}
.nest-item {
    flex: 1;
    overflow: auto;
    background-color: #046b5f;
}
.content {
    padding: 10px;
    height: 600px;
}
</style>
<div class="area flex">
    area
    <div class="item flex">
        item
        <div class="nest-item">
            <div class="content">content</div>
        </div>
    </div>
</div>

Я надеюсь добиться такого эффекта: область родительского контейнера имеет заданную высоту и представляет собой гибкий эластичный блок с элементом дочернего элемента внутри него, используяflex: 1Указано, что оставшееся пространство заполнено, а элемент также является гибким эластичным блоком, а также имеет вложенный элемент вложенного элемента, который также занимает оставшееся пространство.overflow: autoПоказывать полосы прокрутки после того, как их содержимое превышается. Эффект следующий:

Идея этого макета очень проста, то есть задав коэффициент расширения подэлементов эластичного бокса, вы можете получить контейнер, который автоматически заполняет оставшееся пространство по высоте, а затем поместить содержимое, которое должен отображаться в этом контейнере.В некоторых случаях это действительно относительно хорошая идея, он может отображаться нормально до Chrome72. Но Chrome72.0.3626.81 показывает следующее:

Выслеживать

Почему возникает такая проблема? Смотрим характеристики(drafts.CSS grid.org/CSS-flex box…) Минимальный размер дочернего элемента на главной оси гибкого блока — это размер содержимого (ширина или высота в зависимости от главной оси).

Тогда давайте снова посмотрим на приведенный выше пример.Главная ось области вертикальна, минимальная высота элемента дочернего элемента является высотой содержимого, а вложенный элемент растягивается по содержимому, а содержимое имеет высоту (600 пикселей, что превышает высоту контейнера) , то минимальная высота элемента превышает 600 пикселей. Таким образом, слои растягиваются по содержимому, а полоса прокрутки отсутствует, что, похоже, соответствует ожиданиям спецификации.

В отзыве о проблеме с хромом кто-то упомянул об этой проблеме (не говорите .chromium.org/afraid/chromium/…), согласно ответу, это корректировка, сделанная официальным лицом, чтобы сделать Chrome более совместимым с нормативным поведением. Другими словами, в версиях до Chrome 72 это ошибка, которая не соответствует спецификации. Новая настройка фактически заключается в том, чтобы применить поведение по умолчанию минимальной высоты дочерних элементов гибкого эластичного блока.min-height: min-content, как упоминалось в официальном ответе, может сбить с толку то, что дочерние элементы действуют как гибкие блоки, но ведут себя иначе, чем обычные блоки.

Решение

Теперь, когда мы знаем причину, что, если мы все еще хотим использовать такой макет?

Да, мы указываем минимальную высоту для элемента, чтобы он не использовал поведение по умолчанию (то есть высоту содержимого), обычно мы указываем минимальную высоту 0min-height: 0. После добавления этого стиля к элементу давайте посмотрим на эффект:

Что ж, он оправдал наши ожидания. Чтобы проверить поведение направления главной оси, упомянутого в спецификации, давайте изменим код и попробуем установить главную ось в горизонтальном направлении.Код выглядит следующим образом:

<style>
div {
    box-sizing: border-box;
}
.flex {
    display: flex;
    flex-direction: row;
}
.area {
    padding: 10px;
    height: 300px;
    width: 300px;
    background-color: #3fb9ab;
    color: #fff;
}
.item {
    padding: 10px;
    flex: 1;
    background-color: #158c7e;
}
.nest-item {
    flex: 1;
    overflow: auto;
    background-color: #046b5f;
}
.content {
    padding: 10px;
    width: 600px;
}
</style>
<div class="area flex">
    area
    <div class="item flex">
        item
        <div class="nest-item">
            <div class="content">content</div>
        </div>
    </div>
</div>

Эффект следующий:

Кажется, что когда главная ось находится в горизонтальном направлении, это соответствует ожидаемому поведению спецификации (Chrome 72 и предыдущие версии соответствуют), тогда мы добавляем стиль к элементуmin-width: 0, эффект следующий:

Ну, это то, что мы ожидали.

Эпилог

Хорошо, теперь вы знаете, что происходит, но подождите, вы сказали, что обновились до Chrome 72 и не нашли проблему, о которой я сказал?

Это связано с тем, что чиновник заметил, что эта модификация повлияет на нормальное отображение некоторых веб-сайтов, поэтому в Chrome 72.0.3626.96, выпущенном 6 февраля 2019 года (как раз во время праздника Весны), эта проблема была возвращена к прежнему поведению. (chromium.Google source.com/chromium/… хотя…).

Официальное значение заключается в том, чтобы избежать негативного влияния этой модификации на некоторые веб-сайты, поэтому зарезервируйте время для всех модификаций и подождите, пока Chrome73 не выпустит это изменение. Так что для лучшего просмотра в будущем, проверьте свою страницу!

Категории