Я изучаю flexbox и то, как гибкие элементы размещаются внутри гибкого контейнера, при этом их начальная ширина является гибкой, а затем сжимается и увеличивается, когда появляется отрицательное и положительное пространство соответственно. Однако, когда я попробовал это на практике, я увидел различия в том, как это работает в двух браузерах — Firefox и Chrome, когда гибкие элементы являются изображениями.
Предположим, мне нужны два гибких элемента, которые являются изображениями ( шириной 700 пикселей и 900 пикселей) в двух равных столбцах внутри центрированного гибкого контейнера с максимальной шириной: 960 пикселей.
Код: Выделить всё
img {
width: 100%;
}
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 960px;
display: flex;
}
Код: Выделить всё
Two Images side by side , overflows in Chrome but shrinks in Firefox
[img]https://www.unsplash.it/700/300[/img]
[img]https://www.unsplash.it/900/300[/img]
Код: Выделить всё
Two Images side by side , overflows in Chrome but shrinks in Firefox
[img]https://www.unsplash.it/700/300[/img]
[img]https://www.unsplash.it/900/300[/img]
В Firefox они работают так, как я ожидал. Каждое гибкое изображение имеет базовый размер: 960 пикселей (ширина изображения = 100% ширины гибкого контейнера), а затем каждое сжимается до 480 пикселей. Однако в Chrome изображения имеют собственную ширину (700 и 900 пикселей) и переполняют гибкий контейнер (ширина изображения, равная 100 % родительского гибкого контейнера, не работает). Кроме того, в инспекторе Chrome, если я наведу курсор на гибкий контейнер, я увижу заштрихованную переполняемую область гибкого контейнера:
Ранее я узнал, что заштрихованная часть гибких контейнеров показывает свободное пространство, доступное для увеличения элементов при их ширине: max-content. Итак, я действительно не понимаю, почему переполненная область в гибком контейнере в этом случае отображается затененной, поскольку я не могу представить, чтобы элементы росли в это пространство.
Я узнал (почему не сгибаются ли элементы до размера содержимого?), что вы можете это исправить, установив минимальную ширину изображений примерно на 0
Этот CSS действительно заставляет Chrome вести себя как Firefox при отображении гибких полей, но я не знаю, почему. Из ответа на вопрос «Переполнение стека» я понял, что для изображений минимальная ширина = минимальное содержимое — это внутренний размер изображения, и поэтому он не может уменьшаться ниже этого значения. Однако для меня не имеет смысла то, почему ширина изображений не увеличивается (до ширины родительского гибкого контейнера 960 пикселей), когда каждое из них имеет ширину 100%, поскольку она больше, чем min-width = min. -содержание изображений (960 пикселей > 700 пикселей или 900 пикселей) и почему для одного браузера нужно добавлять min-width:0px, а для другого это не нужно.
Подробнее здесь:
https://stackoverflow.com/questions/781 ... and-chrome
Мобильная версия