Firefox и Chrome ведут себя по-разному при использовании flex:1 в img.CSS

Разбираемся в CSS
Ответить
Anonymous
 Firefox и Chrome ведут себя по-разному при использовании flex:1 в img.

Сообщение Anonymous »


При использовании flex:1 для img Firefox и Chrome ведут себя по-разному.

Код, демонстрирующий поведение.

Документ Что-нибудь для заголовка Lorem ipsum dolor sit, amet consectetur adipisicing elit. Одио, вообще?

Изображение

.box-img{ ширина: 100%; цвет фона: красный; дисплей: блок; } .контейнер{ дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; разрыв: 1рем; } .flex{ гибкий: 1; цвет фона: коричневый; } Если вы откроете код в Firefox и Chrome, вы заметите, что в Firefox соотношение составляет 50%/50%. а в Chrome img занимает большую часть экрана.

Меня интересовало поведение Firefox, где гибкие элементы занимают одно и то же пространство в области просмотра.

Я нашел обходной путь, поместив img в div и применив flex к div вместо img. Я хотел бы знать, нормально ли такое поведение. Это потому, что элемент img является замененным элементом и не соответствует нормальному поведению элемента?

Заранее спасибо, что уделили время.
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»