Overflow a list inside a div of which overflow:hidden

Question

I have a div and that div has a height of 200px. Inside the div there is text and I don't want the div to have scrollbars therefore I've set overflow:hidden.

Now, inside that div there is a also a list, acting as a dropdown box. When you click on the list/dropdown box, I want it to come on TOP of the main div.

Here is an example with the main div to overflow:hidden:

And this is an example without overflow:hidden. So I want the following but the text not overflowing.

jsFiddle: http://jsfiddle.net/w8kQA/

Answer 1

You could set the overflow:hidden on the element inside the box, instead of on the box itself:

http://jsfiddle.net/w8kQA/1/