How do I force a div to stretch to fit its content rather than making scrollbars?

开发者_如何学编程I had a table in my application that could grow to ridiculous heights, so I added a wrapper div around it and set overflow-y: auto to get scrollbars. This unfortunately stopped the div from stretching it's width. Now it has scrollbars for both height and width. Setting overflow-x: visible doesn't even affect the result. I need the width to stretch since the content is of variable width.

Fiddle to illustrate the problem: http://jsfiddle.net/SG8T9/3

Thanks for any help

I'm not sure if this is what you mean but take a look here http://www.brunildo.org/test/Overflowxy2.html

from that page:

According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....

so overflow-x: visible becomes overflow-x: auto.

maybe you can make the container wide enough to hold the content, so it doesn't have to overflow.

You must not define a width for your div, otherwise it will not overflow that width regardless of the overflow-x setting. Instead use min-width and max-width to set expansion values, then overflow-x:visible; should work fine.

Here's a fiddle: http://jsfiddle.net/shanethehat/SG8T9/

Note that the defined max-width must be at least as large as the width of the content plus the width of the vertical scrollbar.