I have a div with two elements, an image and text inside a flexbox. I try to maintain the ratio between the two using flex: 1 and flex: 2. (one third for the image, two this for the text).
It looks like this:
.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; }<div class="actual-output"><div class="body"><img class="thumbnail" src="https://place-hold.it/300x500" /><div class="description"><p>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.</p></div></div></div>In firefox, when I resize it, it continues to maintain the 1:2 ratio:
In Chrome, this does not happen:
Is there a mistake in my CSS? Why is there a different in browser behavior?