Почему flexbox ведет себя по-разному в Chrome и Firefox?CSS

Разбираемся в CSS
Ответить
Anonymous
 Почему flexbox ведет себя по-разному в Chrome и Firefox?

Сообщение Anonymous »

У меня есть элемент div с двумя элементами: изображением и текстом внутри флексбокса. Я пытаюсь сохранить соотношение между ними, используя flex: 1 и flex: 2. (одна треть для изображения, две для текста).
Выглядит это так:

Код: Выделить всё

    .body {
display: flex;
flex-direction: row;
}

.thumbnail {
flex: 1;
width: 100%;
}

.description {
flex-direction: column;
flex: 2;
}
.description p {
margin: 0;
}

.actual-output {
padding: 10px;
}

Код: Выделить всё


[img]https://place-hold.it/300x500[/img]

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.




В Firefox, когда я изменяю его размер, он продолжает сохранять 1: 2 соотношение:
Изображение
Изображение

В Chrome этого не происходит:
Изображение

Есть ли ошибка в моем CSS? Почему поведение браузера отличается?

Подробнее здесь: https://stackoverflow.com/questions/791 ... vs-firefox
Ответить

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

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

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

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

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