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

[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 этого не происходит:
< img alt="введите здесь описание изображения" src="https://i.sstatic.net/QsD7k4En.png" />


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

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