Сбой макета Flex из-за Chrome 73

Chrome CSS

Феномен

В проекте существуют следующие вложенные гибкие структуры:

<style>
  /* 通用样式 */
  .card {
    width: 200px;
    height: 300px;
    margin: 20px;
    border: 1px solid #999;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .header {
    flex: none;
    height: 40px;
    border-bottom: 1px solid #333;
  }
  .scroll {
    overflow-y: auto;
  }
  .p {
    margin: 10px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.2);
  }  
</styl>
  
<!-- 布局一 -->
<div class="card flex">
  <div class="header">Header</div>
  <div class="flex">
    <div class="scroll">
      <div class="p"></div>
    </div>
  </div>
</div>
  
<!-- 布局二 -->
<div class="card flex">
  <div class="flex">
    <div class="header">Header</div>
    <div class="scroll" style="flex-grow:1;">
      <div class="p"></div>
    </div>
  </div>
</div>

На самом деле это выглядело так до Chrome 73 (Электрон под рукой — Chrome 69):

Все соответствует ожидаемым результатам, прокрутка — это прокручиваемая область, однако эффект отображения Chrome 73 таков:
Высота родительского элемента растягивается дочерним элементом, в результате чего элемент прокрутки не может прокручиваться. что?почему?нани?

причина

Причина этого в том, что объяснение высоты в норме находится в этомглава, краткое содержание:

Минимальный размер гибкого элемента (высота или ширина в зависимости от направления главной оси) равен размеру внутреннего содержимого. То есть значение по умолчанию min-height/min-width — «авто».

эммм... прочитай тысячу раз "норму" и увидишь ее значение. Когда я снова и снова понимаю этот вывод, кажется, что реализация новой версии Chrome соответствует спецификации! Действительно, шаг Chrome заключается в том, чтобы приблизить поведение гибкой разметки браузера к норме.

Эта проблема от сообщества Chrome:Flexbox rendering changed between chrome 71 and 72, было бурное обсуждение вышеописанной проблемы (Layout 2), и даже в итоге привело к официальному откату.

Что касается того, почему мы не осознавали эту проблему до 73 года, мы объясним это в следующих лакомых кусочках.

Однако следовать норме вполне политкорректно, что ни говори! Разработчики могут только следовать тенденции к изменениям.

ремонт

На самом деле, когда я увидел это явление, мое сердце не испытало больших колебаний, потому чтоmin-widthМне дали подготовительный класс (см. лакомые кусочки ниже). Поэтому я быстро нашел способ освободиться.

Найдите элемент, который растянут на самом внешнем слое (в двух вышеприведенных макетах он является прямым родительским элементом прокрутки), и добавьте его к нему.min-height: 0свойство для исправления ненормального макета.

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

<div style="height: 200px;overflow: scroll;">
  <div style="height: 400px"></div>
</div>

Когда для родительского элемента установлено значение overflow:hidden/scroll, при отображении родительский элемент будет скрывать часть переполнения дочернего элемента.

Конечно, переполнение в гибком макете, его фактическая функция заключается в том, чтобы поместитьmin-heightУстановите на 0.

Кроме того, вы также можете установить дочерний элемент, элемент прокрутки в приведенном выше примере,height: 100%отремонтировать. Однако, когда уровней много, атрибут нужно передавать по слою, что недостаточно экологично.

Мелочи

Проблема успешно исправлена, вот несколько эпизодов~

1. Chrome 71->72->73

Это изменение впервые появилось в Chrome 72, но почему мы не заметили его до Chrome 73? Потому что после выпуска Chrome 72 из-за сильного отклика Chrome решил сначала откатить изменения, дав разработчикам больше времени для адаптации к изменениям.

Однако выпуск Chrome 72 и последующий выпуск версии 72 с откатом произошли во время праздника Китайской весны, и было мало отзывов пользователей.У китайских разработчиков, таких как я, я вообще не заметил этого предупреждения. . .

2. Минимальное дошкольное образование

Почему я говорю, что меня заранее обучили min-width?

Я реализовал вкладку, похожую на редактор:

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

Тогда зачем вам явно объявлять родительский элементmin-widthШерстяная ткань? Кроме того, все случайные травмы, вызванные этим обновлением, произошли на изгибе вертикальной компоновки.

Ответ на самом деле очень кровавый, потому что Chromemin-widthЗначение по умолчанию , которое было установлено в соответствии со спецификацией "auto" с самых первых дней. . .

Ссылаться на

  1. Flexbox sets height of inside element to 0
  2. MDN min-height
  3. MDN min-width
Категории