Гибкое сжатие между Firefox и Chrome

Следующий сокращенный пример кода отображается по-разному в Firefox и Chrome. Это результат ошибки браузера, и если да, то какой рендеринг по спецификации, а какой нет?

Я хотел бы получить ссылку на отчет об ошибке, если таковой имеется.

Прямо сейчас, для моих целей, добавление flex-shrink: 0 в этом сокращенном примере: navbar, решает проблему, но я хотел бы знать, будет ли это работать в будущем, как только ошибка может быть исправлена ​​...

#fixed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#tall {
  height: 300%;
}

.outline {
  outline: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="fixed" class="d-flex flex-column">
  <nav class="navbar outline">
    <a class="btn btn-secondary">Button</a>
  </nav>
  <div id="tall"></div>
</div>

Источник

1 ответ

Решение

flex-shrink несоответствие между Firefox и Chrome

Есть несоответствие, но flex-shrink не кажется причиной.

Это результат ошибки браузера, и если да, то какой рендеринг по спецификации, а какой нет?

Это не похоже на ошибку. Это больше похоже на вмешательство, которое является преднамеренным отклонением от спецификации и применяется Chrome.

flex-shrink: 1

Начальная настройка гибкого контейнера flex-shrink: 1, как определено в спецификации flexbox. Это означает, что гибкие элементы могут сжиматься во избежание переполнения контейнера.

И Chrome, и Firefox придерживаются этого руководства. Вы можете проверить это в инструментах разработчика, проверив стили браузера по умолчанию для гибких элементов. И Chrome, и Firefox отображают ваши флекс flex-shrink: 1,

Для получения более подробной информации смотрите: Как учитывается коэффициент сгибания-сжатия в отступах и рамке?

min-height: auto

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

Более подробную информацию смотрите в разделе: Почему гибкие элементы не уменьшаются до размера контента?

Ваш код

У вас есть flex-контейнер в направлении столбца с двумя элементами flex: .navbar а также #tall, В Chrome и Firefox оба элемента по умолчанию установлены на flex-shrink: 1 а также min-height: auto, Я проверил это с помощью инструментов разработчика. Пока все выглядит хорошо; Все настройки соответствуют спецификации.

Вот где начинается расхождение: #tall пункт установлен в height: 300%, Этот предмет намного выше контейнера. Однако с flex-shrink: 1 не может быть переполнения. Все предметы с ненулевым flex-shrink должны уменьшить их размер, чтобы предотвратить переполнение контейнера самими собой и их братьями и сестрами (при условии, что размер содержимого позволяет это). Но с min-height: auto элементы не могут уменьшить свой размер ниже высоты содержимого.

Все это работает в Firefox. Но почему не в Chrome? Почему .navbar предмет, который сжимается #tall, уменьшаясь ниже размера его содержимого (кнопки) в Chrome?

Fire Fox

Как указано выше, #tall элемент, с height: 300%, не может переполнить контейнер из-за flex-shrink, Его брат, .navbar пункт, также должен сжиматься из-за flex-shrink, Тем не менее, он не может сжаться ниже размера своего содержимого из-за min-height: auto, Все хорошо. Все соответствует спецификации.

Хром

Как и в Firefox, #tall элемент, с height: 300%, не может переполнить контейнер из-за flex-shrink, Его брат, .navbar пункт, также должен сжиматься из-за flex-shrink, Тем не менее, он не должен уменьшаться ниже размера своего содержимого из-за min-height: auto, но это так или иначе. Зачем?

Вмешательства

Вмешательство - это когда пользовательский агент решает немного отклониться от стандартизированного поведения, чтобы обеспечить значительно улучшенное взаимодействие с пользователем.

источник: https://github.com/WICG/interventions

Из моего ответа здесь:

По крайней мере, с 2017 года кажется, что Chrome либо (1) возвращается к min-width: 0 / min-height: 0 по умолчанию, или (2) автоматически применяя 0 значения по умолчанию в определенных ситуациях основаны на загадочном алгоритме. (Это может быть то, что они называют вмешательством.) В результате многие люди видят, что их макет (особенно нужные полосы прокрутки) работает, как и ожидалось, в Chrome, но не в Firefox / Edge.

Итак, как указывалось в начале этого ответа, проблема, с которой вы сталкиваетесь, вероятно, не ошибка, а преднамеренное отклонение от спецификации. Это будет Firefox, который полностью соответствует спецификации.

Важные заметки

Важно отметить, что у меня нет прямых знаний о внутренней работе Chrome, Firefox или любых других браузеров. Я только верю, что Chrome применяет min-height вмешательство, основанное на моих личных наблюдениях. Это теория. Больше похоже на экстраполяцию. Есть вероятность, что я не совсем (или даже удаленно?) Прав. Хром может возиться с min-height, flex-shrink и / или другие свойства. Я не знаю точно.

Также важно отметить, что, поскольку это поведение не соответствует спецификации, оно может быть ненадежным и может измениться в любое время.

Источник
Другие вопросы по тегам