Faire un div parent défilement vertical qui ne provoque pas de débordement des enfants

Question

J'ai quelque chose comme suit:

<div style="float: left; height: 20px; overflow-y: scroll"> 
    <div>hello this is a test</div> 
    <div>hello this is another test</div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

Le div parent pousse à la largeur appropriée pour tenir le plus grand enfant (qui est ce que je veux). Cependant, la barre de défilement verticale entraîne une réduction de la largeur interne, ce qui entraîne l'enroulement de l'enfant le plus grand.

Existe-t-il un moyen d'amener le parent à la largeur du plus grand enfant + la largeur de la barre de défilement? J'ai essayé chaque tour de marge que je connais, mais rien.

Answer 1

Trouvé une solution, mais ouvert à d'autres suggestions.

En ajoutant un enfant droit flottant au plus long enfant (ou, en cas de doute qui est le plus long enfant, à chaque élément):

<style type="text/css"> 
.stretcher { float: right; right: -50px; width: 50px; height: 1px; } 
</style> 

<div style="float: left; height: 20px; overflow-y: scroll"> 
    <div>hello this is a test</div> 
    <div>hello this is another test<div class="stretcher"></div></div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

Answer 2

Ajout d'un certain remplissage horizontal est suffisante dans mes tests avec IE6/7

<div style="float: left; height: 50px; overflow-y: scroll; padding: 0 50px 0 4px;"> 
    <div>hello this is a test</div> 
    <div>hello this is another test lorem ipsum</div> 
    <div>t1</div> 
    <div>t2</div> 
    <div>t3</div> 
</div> 

Answer 3

J'ai eu le même problème précédemment mais je ne pense pas qu'il soit possible d'augmenter la taille d'un élément dynamiquement en utilisant CSS. Mais ce que vous pouvez essayer est d'ajuster la hauteur dynamiquement en utilisant Javascript.

Dans jQuery, vous pouvez utiliser la méthode height() à chaque fois que vous ajoutez ou supprimez un élément enfant au parent.

Je l'ai fait dans un de mes projets, mais il y avait encore des problèmes avec Opera (IE était bien;)). Mais comme nous n'avons pas beaucoup de clients utilisant Opera, j'ai ignoré le problème.

FYI: J'ai simplement parcouru votre question. Corrigez-moi si je n'ai pas bien compris votre problème