List overflow inside div from which overflow: hidden

Question

I have a div and the div is 200 pixels high. There is text inside the div, and I don't want the div to have scrollbars, so I set the overflow: hidden.

Now inside this div there is also a list acting as a drop-down list. When you click on a list / dropdown, I want it to appear at the top of the main div.

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

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

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

Answer 1

You can set overflow: a hidden element inside the field, and not on the field itself:

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

Answer 2

In the comments above, you mention that you have 20 boxes inside a div.

If so, I would #box and .list inside a div holder . That way you can achieve your layout and still have multiple boxes in the div.

JSFiddle: http://jsfiddle.net/w8kQA/2/

Answer 3

You can also reduce the maximum height of your list to fit into the div. http://jsfiddle.net/etienne_carre/w8kQA/4/

Answer 4

You can do it like this: http://jsfiddle.net/w8kQA/7/