CODEWITHSUNDEEP
htmlcssflexbox
Michael Lewis
Michael Lewis

Reputation: 4302

Flexbox scrollbar issue

I'm getting a mysterious and undesirable scrollbar. I made a pen to reproduce the issue. I found several culprits that fix the problem, and I've identified them in the CSS comments.

Can someone help me understand why this is happening? Or is it just me that's seeing this? Given that a small variation in font-family or font-size fix the problem, I'm guessing its a bug.

(I'm on Windows 10, Chrome 55 and Firefox 51)

Update: Michael_B (Win 10, Chrome 55) cannot reproduce the issue. If you, like me, see a scrollbar when viewing the pen, could you please report so in comments? Thanks.

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

Here's the code:

<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; */
}

Upvotes: 2

Views: 993

Answers (2)

Asons
Asons

Reputation: 87292

I think this is an issue they not yet found at normalize css, resetting the line-height to 1.15, when used with flexbox (might be in other situations as well)

As most browsers defaults to a line height of ~ 1.2, and if you set that, everything works well on all browsers, but as soon as you go below, Firefox create scrollbar at 1.15, Chrome and Edge at 1.1.

When you set these lower values (less than 1.2) one can clearly see the text overflows its container, especially when letters like g is used, but the calculated height is the height of the container, hence scroll appears.

So by removing the line-height (or give it a higher value), or add padding, or anything that creates a height in the header/footer, will solve the overflow issue.

I am quite sure there is a technical clarification to be found at W3C, though I don't know where to find it, so if any one does, feel free to add a link in my answer, or post an answer of your own

Upvotes: 3

Serg Chernata
Serg Chernata

Reputation: 12400

You have 3 flex children: header, main and footer. But you've given a flex value only to the main section. In simple terms you aren't telling the browser what to do with header and footer so it's pushing them out.

To fix, give your header and footer a measurement. Anything, even something as simple as the following:

header, footer {
    background: #ddd;
    height: 20px;
}

Upvotes: 0

Related Questions