slikts slikts - 1 month ago 10
CSS Question

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.

Answer

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>

Comments