Scroll bars showing when they did not expect them to increase the line and overflow

Question

I get unexpected (for me) behavior when a vertical scrollbar appears. I do not understand that there may be a restriction on the height of the container.

I can solve this problem either by changing the LI: 1 border or set UL lineheight: normal, not 1.

Can someone explain what is really happening? That is, what height is exceeded, why do you need a vertical scrollbar?

I created a very simple JSFIDDLE to illustrate the problem I am having.

HTML code:

<div class="content-section" > <ul > <li>cheese</li> <li>crackers</li> </ul> </div> 

CSS code:

 body { line-height: 1; } ul { margin: 0; } .content-section { overflow-y: auto; } 

Answer 1

This is because your line-height set to 1, which means that the line height matches the font size. This causes the font to slightly overflow the line. You need to set line-height to a value greater than the height of the text, as you might have guessed. The text technically behaves as it should. The height of the window is determined by the height of the lines, but the text is always slightly larger than the lines. Your line-height should never be equal to the size of your font in terms of readability. Hope this helps. I know that this does not exactly tell you where this height comes from, but I believe that you have successfully learned many ways to deal with it.

Answer 2

I am not sure why you need overflow in order to install auto, if you remove it then the problem will be solved.

If the content section should be of a certain height, then set the height and a scrollbar will appear if necessary (if you need overflow)

http://jsfiddle.net/pGuHG/2/

 .content-section { overflow-y: auto; height: 100px; }