CSS max-height and overflow auto always displays v

Question

I have a div class set up with the following CSS style:

div.multiple_choice{
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto;
}

The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.

This is occuring in Google Chrome (version 18.0) and Iceweasel 11.

Answer 1

I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.

Answer 2

I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:

.nav-tabs > li:last-child {
   margin-bottom:0;
}

---

Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
  <li></li>
  ...
</ul>

Answer 3

I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.

Answer 4

I have encounter this problem.But I solved this use the following css style:

div.yourcontainer{overflow-y:auto;}

If the container was higher than max-height,the vertical scrollbar will show.

Answer 5

I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.

The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.

Here is an example of inspecting a rogue margin on an icon within a list item in my project:

Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.

Answer 6

As it turns out, another CSS style was causing the issue:

body{
    line-height: 1;
}

Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here