css - 高度灵活的Flex-box：Chrome和其他浏览器的结果不同

<html>
  <body>
    <div id="main">
      <div id="test">
        <div style="height: 10000px; background: white; margin: 60px;">
            This is inner div
        </div>
      </div>
    </div>
  </body>
</html>

CSS：

html, body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;   
}

#main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 60px;
  background-color: #fafafa;
}

#test {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #f0f0f0;
  overflow-y: scroll;
}

当内部div的高度非常大（例如10000px）时，预期结果是#main的高度保持不变。 Chrome提供了预期的布局。但是其他浏览器会增加#test和#main的高度：

codepen demo here

我的代码有问题吗？

（自2002年以来，flexbox和世界的新变化...）

高度灵活的Flex-box：Chrome和其他浏览器的结果不同

0 个答案: