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

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
ueli
Posts: 2
Joined: July 22nd, 2018, 3:07 am

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

Post by 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.
User avatar
DanRaisch
Moderator
Posts: 127187
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

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

Post by DanRaisch »

Moving to Web Development forum.
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

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

Post by Benjamin Markson »

ueli wrote: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
XUL is dead. Long live the Google Chrome Clones.
User avatar
therube
Posts: 21703
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

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

Post by 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?)
Fire 750, bring back 250.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript
ueli
Posts: 2
Joined: July 22nd, 2018, 3:07 am

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

Post by 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
Locked