Overflow a list inside a div of which overflow:hidden

问题

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/

回答1:

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

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

回答2:

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

If that is the case then I would wrap the #box and the .list inside of a holder div. That way you can achive your layout and still have multiple boxes in a div.

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/8432883/overflow-a-list-inside-a-div-of-which-overflowhidden