1

My web page sample (looks different in Chrome and Firefox):

<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Firefox vs Chrome</title>

  </head>

  <body style="margin:  0px;">
    <div id="root" style="display: flex;flex-direction: column;height:  100vh;">
      <header style="background: orange;flex: 0 0 auto;height: 200px;">Header</header>

      <div id="sub-1" style="flex: 1 1 auto;background: blue;display:  flex;">
        <div id="sub-2" style="overflow: auto;display: flex;flex: 1 1 auto;">
          <div id="content" style="height: 2000px;flex: 1;">
             Content
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

Result in Chrome (as expected):

enter image description here

Result in Firefox (bug???)

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Nickolay Savchenko
  • 1,474
  • 16
  • 28

0 Answers0