css - Firefox和Chrome flexbox具有嵌套块的不同行为溢出

我的网页示例（在Chrome和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>

Chrome中的结果（按预期方式）：

Firefox中的结果（bug ???）

Firefox和Chrome flexbox具有嵌套块的不同行为溢出

0 个答案: