What exactly means width:auto ? (importance: low)

[ueli]

I have created a page with a form. I want the form to have a defined height, so I put a div with a defined height in the form. If there is insufficient space for the inputs, I want a vertical scroll bar. I want this overflow thing only for the vertical dimension, not for the horizontal one, so I set width to auto.

Now I see that I also get a horizontal scroll bar with the vertical one. My conclusion is that Firefox calculates the auto width without taking the vertical scroll bar into consideration.

This may be right, or it may be wrong. To find out, I had different browsers vote on the issue. Result:
- Firefox and Edge both show the horizontal scroll bar
- Chrome and Opera don't show the horizontal scroll bar

Does anyone know if the standards have a clear definition of how to calculate auto width?

Picture: http://uelissimo.bplaced.net/temp/autowidth.png
Code: http://uelissimo.bplaced.net/temp/autowidth.html
Note: The picture shows the Firefox way of rendering.
If you click on the link with the code, the display depends on your browser, as explained above.

[DanRaisch]

Moving to Web Development forum.

[Benjamin Markson]

I want a vertical scroll bar. I want this overflow thing only for the vertical dimension, not for the horizontal one, so I set width to auto.

Overflow has a pair of siblings, overflow-x and overflow-y, for horizontal and vertical scrollbars.

Try replacing overflow:auto with: overflow-x:hidden; overflow-y:auto; ...this works for me for your example at http://uelissimo.bplaced.net/temp/autowidth.html.

Ben

[therube]

What versions of FF?

I recently read a Bug, maybe it was something to do with autowidth, where FF/Edge handled things one way, Chrome & others another, oh, in this case it was video... I should be able to find it ... now...

Maybe, Bug 958714 Flex items treat percentage padding & margin values in vertical axis as 0, if the flex container lacks an explicit height (was allowed by spec, but perhaps not interoperable?)

[ueli]

I just realized that the effect depends on the monitor size. On a different monitor with a better horizontal resolution FF doesn't create a horizontal scroll bar. This is because of the div that surrounds the form. It's width depends on the window size, and it constrains the space available to the form. I have replaced my original code with a slightly modified version where the surrounding div has a fixed size (px).

With the modified version I still get the described effects for all browsers I tried. However, I tend to believe that the different results with different browsers depend on some subtle parameters like font size in pixels (I use rem) or the width of scroll bars in the overflow case or window border widths ...

I therefore think the case should be closed.

Ueli