Strano comportamento di “overflow: auto” su Chrome

Sto sviluppando un sito con una sezione blog. Ho bisogno di questa sezione per avere un’altezza fissa. Per poter vedere tutti i post nel blog ho aggiunto un overflow: auto quindi mostra una barra di scorrimento quando necessario.

This is a long post....
This is a long post....
This is a long post....
.... .... .... ....
#container { overflow: hidden; } #content { height: 200px; overflow: auto; border: 1px solid red; } .post { margin: 20px 0; }

Ho provato questo su Chrome, Firefox e IE. Il sito su Firefox e IE funziona come previsto, ma Chrome, sebbene mostri una barra di scorrimento quando l’elenco dei post è più grande del contenitore, aggiunge un vuoto bianco alla dimensione dell’elenco di post sotto il contenitore.

Ho creato un violino ma non riesco a riprodurre il comportamento di Chrome lì:

http://jsfiddle.net/u5d56/3/

Uso di overflow: lo scorrimento anziché l’auto mi dà gli stessi risultati.

    Qualche idea?

    Grazie in anticipo

    Ho trovato la soluzione al mio problema. Per qualche ragione, affinché funzioni in Chrome ho dovuto aggiungere una posizione: regola relativa a #content :

     #content{ position: relative; height: 200px; overflow:visible; border 1px solid red; } 

    Una ansible risposta da parte di HTML5 Application Development Fundamentals

     #content{ height: 200px; region-overflow:auto; overflow:visible; border 1px solid red; } 

    Ora questo è più orientato verso la progettazione retriggers. Aggiungi -webkit- prima dell’overflow potrebbe essere d’aiuto poiché è solo un problema di Chrome. Supponendo che sia CSS3.

     #content { height: 200px; overflow: auto; -webkit-overflow: auto; border: 1px solid red; }