html - Flexbox滚动条问题

Question

我遇到了一个神秘且不受欢迎的滚动条。我做了一支笔来重现这个问题。我发现了几个解决问题的罪魁祸首，并在 CSS 注释中识别了它们。

有人可以帮我理解为什么会发生这种情况吗？还是只有我看到这个？鉴于字体系列或字体大小的微小变化可以解决问题，我猜它是一个错误。

(我使用的是 Windows 10、Chrome 55 和 Firefox 51)

更新:Michael_B(Win 10、Chrome 55)无法重现该问题。如果你和我一样，在查看笔时看到滚动条，你能在评论中报告吗？谢谢。

http://codepen.io/technolojesus/pen/EZEBqW

代码如下:

<div id="app">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</div>

CSS:

html {
  height: 100%;

  /* normalize.css does this.. 
  strangely, removing this line-height property fixes the problem */
  line-height: 1.15;

  /*
    default font:  no scrollbar
    Verdana: scrollbar
    Tahoma: no scrollbar
    "Open Sans": scrollbar
  */
  font-family: Verdana;

    /*
    font-size: 11px --> no scrollbar
    font-size: 12px --> scrollbar
    font-size: 13px --> scrollbar
    font-size: 14px --> no scrollbar
  */
  font-size: 12px;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  /* strangely, adding padding here makes the scrollbar disappear */

  /* padding: 1px; */
}

Answer 1

我认为这是他们在 normalize css 中尚未发现的问题，将 line-height 重置为 1.15，当与 flexbox 一起使用时(可能在其他情况下，如好吧)

由于大多数浏览器默认的行高约为 1.2，如果您设置了该行高，则所有浏览器都可以正常运行，但一旦您低于行高，Firefox 就会在 1.15 处创建滚动条，Chrome 和 Edge 会在 1.1 处创建滚动条。

当您设置这些较低的值(小于 1.2)时，可以清楚地看到文本溢出其容器，特别是当使用像 g 这样的字母时，但计算出的高度是容器的高度，因此出现滚动。

因此，通过删除行高(或给它一个更高的值)，或添加填充，或在页眉/页脚中创建高度的任何内容，将解决溢出问题。

我很确定在 W3C 上可以找到技术说明，但我不知道在哪里可以找到它，所以如果有人这样做，请随时在我的答案中添加链接，或发布你自己的答案