Question

如果我在Firefox或IE中运行它，我得到一个漂亮的全屏布局，浏览器中没有滚动条，但是在Chrome中，我得到一个垂直滚动条，它将顶部（绿色）行的高度添加到布局两次：

<!DOCTYPE html>
<html style="height:100%;width:100%">
  <head>
    <style media="screen" type="text/css">
      * {
        margin:0;
        padding:0;
      }
    </style>
 
  </head>

  <body style="height:100%;width:100%">
	  <div style="display:flex; flex-direction:column; background-color:red; height:100%">
      <div style="flex 0 0 auto; background-color:green;  min-height:200px">a</div>
      <div style="flex 1; background-color:yellow; height:100%;width:100%; display:flex; flex-direction:row">
          <div style="flex 1; background-color:purple; height:100%;width:100%">a</div>
          <div style="flex 1; background-color:white; height:100%;width:100%">a</div>
        </div>
	  </div>
  </body>
</html>

为什么呢？如何在Chrome中修复此问题？

Chrome中的Flexbox，添加滚动条，为什么？

0 个答案: