List overflow inside div from which overflow: hidden

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:

enter image description here

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

enter image description here

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

+6
list css overflow
Dec 08 '11 at 2:55 a.m.
source share
4 answers

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

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

+2
Dec 08 2018-11-11T00:
source share

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/

+1
Dec 08 2018-11-12T00:
source share

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

0
Dec 08
source share

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

0
Dec 08 '11 at 15:44
source share



All Articles