Различная реализация Flexbox в Firefox и Chrome

Question

Следующий код работает, как и ожидалось, в Firefox, но в Chrome изображения становятся намного больше, чем гибкий контейнер.

.r {
  width: 100%;
  height: auto;
  min-width: unset;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Firefox :

Chrome :

Answer 1

спасибо @TemaniAfif, который направил меня в правильном направлении, и я придумал это:

.r {
	width: 100%;
	height: 100%;
	min-width: 0px;
	max-width: 100%;
}

.container {
    display: flex;
    width: 600px;
}

<div class="container">
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Answer 2

@ TheRuler, лучшее решение - обернуть тег изображения в div или span, чтобы отобразить изображения в соответствии с Firefox.Firefox также будет работать нормально, если вы оберните изображения в div или span.

Теперь вы можете спросить меня, почему это правильно.

По сути, экран flex имеет значение по умолчанию, к которому прикреплены:

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

Теперь для обоих случаев Firefox и Chrome значение по умолчанию одинаково.Но все же рендеринг в обоих браузерах отличается, особенно в случае изображения как гибкого дочернего элемента.

Теперь вопрос о том, кто является правильным, спорен, а о том, кто правильно следует руководящим принципам, также является спорным.

Если вы посмотрите на спецификацию flex, она говорит, что правила flex должны преобладать над свойствами CSS width и height.Таким образом, в этом случае Firefox сокращает размер изображений, чтобы они соответствовали ему в родительском 600px.

Теперь, если вы видите этот пример,

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

Так что, если вы видите этот код в обоих браузерахвы увидите разницу.Chrome определяет свойство высоты дочернего элемента flex, тогда как Firefox его не оценивает.То же самое касается высоты изображения и ширины изображения.Chrome не превалирует высоту.

1018 * Так как браузер пошел с их собственной реализации, что в данном случае не совпадают друг с другом, и это спорно, который является правильным.

Оберните их в span или div, чтобы они работали в обоих браузерах, что должно быть правильным ответом без взлома.Другое решение решит проблему, но это своего рода хак для решения проблемы.

Пожалуйста, дайте мне знать, если вы его получите. Спасибо

Answer 3

Следующий код работает как и ожидалось в Firefox

Я не согласен с этим, потому что для меня Chrome ведет себя как ожидалось по двум причинам:

1. Вы устанавливаете ширину изображения равной 100%, что означает 100% содержащего их блока (контейнера), который определяется как 600px.Таким образом, каждое изображение будет 600px

2. Изображение не может сжиматься до размера его содержимого из-за конфигурации min-width по умолчанию (обратите внимание, что при использовании unset эквивалентно initial в этом случае, так что это как-то бесполезно).Таким образом, изображение будет сохранено на 600px

Если вы добавите min-width:0, изображение будет уменьшаться только по ширине:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Теперь, если учесть высоту, вы столкнулись с эффектом stretch, который также не одинаков в обоих браузерах.Объяснить ¹ немного сложно, но если вы измените выравнивание по умолчанию, вы получите ожидаемый результат в chrome:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
  align-items:flex-start;
}

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Или, если вы измените высоту, используя процентное значение , вы заставите ее потерпеть неудачу , а также получите то, что хотите (это немного страннопотому что мы вызываем другую проблему, чтобы исправить актуальную)

.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
  <img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>

Почему Firefox ведет себя так?

Я не знаю точно, но логическое объяснение состоит в том, чтоFirefox не учитывает конфигурацию min-width по умолчанию и отдает приоритет сохранению соотношения, а не растяжению.

---

¹ Первоначально ваше изображениеОпределяя высоту контейнера, так как они большие (около 700 пикселей в высоту), эта высота используется контейнером, затем мы применяем свойства к нашему изображению, чтобы они сжимались по ширине, и так как выравнивание по умолчанию растягивается, они растягиваются до высоты.контейнера, который был первоначально определен их собственной начальной высотой, создающей это рендеринг.

Если мы удалим эффект растяжения, изображение попытается сохранить их соотношение , так как мы сняли ограничение по высоте.

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

---

Другая альтернатива

Проблема возникла из-заиспользование изображения, заменяющего элемент с внутренним размером, где вычисление ширины / высоты не так просто, как для другого элемента.

Чтобы избежать такого поведения, лучше обернуть изображение внутри div и избегать ихкак гибкие предметы.

.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
  <div class="r"><img src="https://lundbeckconsulting.no/Temp/illu1.jpg" /></div>
</div>