drs6222 drs6222 - 1 month ago 20
CSS Question

Objects within a parent div are still overflowing

Codepen link: http://codepen.io/DustyShap/full/yamRZK/

(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).

On the actual app, results will be generated based on a search term,

I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?

#results_container {

height: 430px;
overflow: scroll;
margin-top: 5px;

}

Answer

The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.

enter image description here

If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.

Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.