Comment contenir un élément div défilable complètement dans un autre?

Question

Je souhaite qu'un élément (overflow: auto) div pouvant faire l'objet d'un défilement soit entièrement contenu dans un autre div, c'est-à-dire qu'il ne fonctionne que comme une superposition avec le parent. Cependant, je ne suis pas capable de faire ce travail avec rembourrage dans l'enfant (que je veux). Voir this fiddle pour un exemple de mon problème.

Comment puis-je accomplir ce que je veux (si possible)?

HTML:

<div id="parent"> 
    <div id="child"> 
     <p>Line 1</p> 
     <p>Line 2</p> 
     <p>Line 3</p> 
    </div> 
</div> 

CSS:

#parent { 
    border: 1px solid #666; 
    height: 2.5em; 
    padding: 0; 
} 

#child { 
    margin: 0; 
    padding: 8px 20px; 
    overflow: auto; 
    height: 100%; 
} 

EDIT

Notez que pour des raisons techniques laissées sur ce scénario, je l'ai décidé de faire l'élément enfant scrollable comme opposée à l'élément parent: l'enfant doit couvrir entièrement le parent, mais cela permet au parent d'afficher au moins une barre de défilement.

Answer 1

Je crois que c'est ce que vous voulez. Vous étiez en train de régler la hauteur sur le mauvais élément. J'ai joué avec les frontières juste pour le rendre plus facile à voir ce qui se passe.

http://jsfiddle.net/QYG5g/4/