Comment forcer un div à s'étirer pour s'adapter à son contenu plutôt que de créer des barres de défilement ?

Question

J'avais un tableau dans mon application qui pouvait atteindre des hauteurs ridicules, alors j'ai ajouté un wrapper div autour d'elle et mettre overflow-y: auto pour obtenir des barres de défilement. Malheureusement, cela a empêché la division de s'étirer en largeur. Maintenant, il y a des barres de défilement pour la hauteur et la largeur. Réglage de overflow-x: visible n'affecte même pas le résultat. J'ai besoin que la largeur soit étirée car le contenu est de largeur variable.

Bricolez pour illustrer le problème : http://jsfiddle.net/SG8T9/3

Merci pour toute aide

Answer 1

Je ne sais pas si c'est ce que vous voulez dire, mais jetez un coup d'œil ici. http://www.brunildo.org/test/Overflowxy2.html

de cette page :

Selon la spécification ... certaines combinaisons avec 'visible' ne sont pas possibles : si l'une d'entre elles est spécifiée comme 'visible' et que l'autre est 'scroll' ou 'auto', alors 'visible' est défini comme 'auto' ....

así que overflow-x: visible devient overflow-x: auto .

Vous pouvez peut-être faire en sorte que le conteneur soit suffisamment large pour contenir le contenu, afin qu'il ne déborde pas.

Answer 2

Vous ne devez pas définir de largeur pour votre div, sinon il ne débordera pas de cette largeur, quel que soit le paramètre overflow-x. Utilisez plutôt min-width et max-width pour définir les valeurs d'expansion, puis overflow-x:visible; devrait fonctionner correctement.

Voici un violon : http://jsfiddle.net/shanethehat/SG8T9/

Notez que la largeur maximale définie doit être au moins aussi grande que la largeur du contenu plus la largeur de la barre de défilement verticale.