CODEWITHSUNDEEP
htmlcssflexbox
slikts
slikts

Reputation: 8158

Row flex container nested in column flex container with explicit height is rendered differently in Chrome and Firefox

This simple example is rendered differently in Chrome than in Firefox or Edge; in one case the main flex item shrinks to fit the flex container (set to viewport height), but in the other it doesn't. Is the rendering difference based on some bug, or is it something else?

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
}
<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

Edit: a more clear example.

Upvotes: 1

Views: 136

Answers (2)

Jake Waitze
Jake Waitze

Reputation: 26

Seems to be an inconsistency across browsers regarding how they may interpret attributes of flex boxes within flex boxes, but I managed to get it to work consistently across browsers by setting the height of the inner box to 0 and then setting the flex box to grow 100% (or 1) within the outer flex box. Here's an example using your code.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
  height: 0;
  flex-grow: 1;
}
<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42370

It seems flexbox do not scale down replaced elements like images (that have an intrinsic aspect ratio) correctly in browsers at the moment, at least! And I believe this is what happens here.

(I read something similar here and met with an issue with image as a flex item here)

Solution: One solution is using max-height: 100% on the flex item or even you can use flex-basis: 100% if it should always fill the parent height:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  background: #f60;
  max-height: 100%;
}
<main>
    <!-- any element longer than the viewport -->
    <img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>

Upvotes: 2

Related Questions