Overflow di un elenco all'interno di un div di cui overflow: nascosto

Question

Ho un div e quel div ha un'altezza di 200 px. All'interno del div c'è il testo e non voglio che il div abbia barre di scorrimento quindi ho impostato overflow: nascosto.

Ora, all'interno di quel div c'è anche un elenco, che funge da menu a discesa. Quando clicchi sulla lista/menu a tendina, voglio che arrivi in ​​cima al div principale.

Ecco un esempio con il div principale per overflow: hidden:

e questo è un esempio senza overflow: hidden. Quindi voglio il seguente ma il testo non trabocca.

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

Answer 1

È possibile impostare l'overflow: hidden sull'elemento all'interno della scatola, invece che sulla scatola stessa:

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

Answer 2

Nei commenti di cui sopra , dici che hai 20 scatole in un div.

Se questo è il caso, vorrei avvolgere lo #box e lo .list all'interno di un div holder. In questo modo puoi ottenere il tuo layout e avere ancora più caselle in un div.

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

Answer 3

È inoltre possibile ridurre il max-height della vostra lista per adattarsi al div. http://jsfiddle.net/etienne_carre/w8kQA/4/

Answer 4

Si può fare in questo modo: http://jsfiddle.net/w8kQA/7/