1760737 - Container with overflow auto doesn't grow to fit children

Status: RESOLVED DUPLICATE of bug 764076

(Core :: Layout: Scrolling and Overflow, defect)

Description

[Guilherme Lopes]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36

Steps to reproduce:

Open https://plnkr.co/edit/YyO1Fuf8mD9QtL97?preview
See that a horizontal scrollbar is renderer

If overflow-y: auto is changed to overflow-y: scroll, it will not show the horizontal scrollbar.

Works fine on Chrome and Microsoft Edge

Actual results:

A horizontal scrollbar is displayed

Expected results:

The parent container should have grown to fit the child.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

In which version are you seeing this? I don't see a horizontal scrollbar in either release or nightly, on Linux, with both overlay and non-overlay scrollbars. In fact, I see a horizontal scrollbar (but without any scroll range) in Chrome here.

Did you mean that you expect an horizontal scrollbar, or that you can see the whole red area on the right? If so, that's a bit of a known issue with a lot of back-story, see bug 1527949 and bug 1700858.

Comment 3

[Guilherme Lopes]

I'm using Firefox 98.0.1 (64-bit) for MacOS (M1-ARM), but this also happens on Windows.
I do not expect to see a horizontal scroll bar. Firefox shows a horizontal scrollbar, but only with overflow-y: auto. Chrome, does not show a horizontal scrollbar here.

Comment 4

[Guilherme Lopes]

Attachment: Firefox Screenshot

Comment 5

[Guilherme Lopes]

Attachment: Chrome Screenshot

Comment 6

[Guilherme Lopes]

On Firefox, the parent div has a width of 238px and on Chrome it has a width of 253px
Child min-width: 214px
Padding-left + Padding-right: 24px (total 238px)
Scrollbar: 15px (total 253px)

Firefox is not accounting for the scrollbar and creating the horizontal scroll.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Ok, Linux scrollbars are 12px so they don't hit the content area, I can reproduce the issue here if I make the padding a little less like 10px. FWIW chrome shows an horizontal scrollbar here.

I think this is bug 764076, see there for why this is not so simple. In any case, now you can use scrollbar-gutter: stable to get the layout you want without having to use overflow-y: scroll.

Comment 8

[Daniel Holbert [:dholbert]]

Two questions:
(1) In bug 764076 comment 28 you indicated that something "uneven" happens if you add scrollbar-gutter - can you elaborate on what ends up uneven? (I do see that there's an awkward-looking amount of red space on the right side of the lower element in your screenshot there -- is that what you're talking about?)

(2) You mentioned there being a connection to "resizing" -- just to clarify, are you talking about a bug that only seems to happen after a resize? (I ask because we do occasionally have bugs like that -- but I'm not seeing anything special around resizing in your example there, so far.) I'm wondering if you're really just talking about cases where the scrollbar ends up not being necessary (possibly but not necessarily because the scrollable area has been resized to be large enough to fit the content).

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #8)

Two questions:
(1) In bug 764076 comment 28 you indicated that something "uneven" happens if you add scrollbar-gutter - can you elaborate on what ends up uneven? (I do see that there's an awkward-looking amount of red space on the right side of the lower element in your screenshot there -- is that what you're talking about?)

If indeed that's what you're talking about: note that the "bonus red area on the right" here is just the dedicated/reserved space for the scrollbar track. That paints as the scrollable element's background color. If you don't want that to appear, then you may be able to get the layout you want by moving that background-color and padding to a separate div inside of the scroller, like in this modified version (where I've got two scrollable areas, one of which is not-tall-enough for its content and one of which is tall enough; they each have a consistent-looking amount of red padding area around them): https://plnkr.co/edit/PEwcSAMI5u3XjwYe

Comment 10

[Guilherme Lopes]

(In reply to Daniel Holbert [:dholbert] from comment #9)

I think it's easier if I show the real application scenario. Here is a link to the application demo: https://plnkr.co/edit/70Rq8r4NvnFqgtY4
If you click on the "burger" icon in the menu header to show the filter, it has a vertical scrollbar. On Firefox, it also shows a horizontal scrollbar.

The options to use the gutter stable, would add an extra "padding" effect next to the list at the bottom. This works fine on Chrome, but it's broken on Firefox.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to Guilherme Lopes from comment #10)

(In reply to Daniel Holbert [:dholbert] from comment #9)

I think it's easier if I show the real application scenario. Here is a link to the application demo: https://plnkr.co/edit/70Rq8r4NvnFqgtY4
If you click on the "burger" icon in the menu header to show the filter, it has a vertical scrollbar. On Firefox, it also shows a horizontal scrollbar.

Gotcha - yes, I do see that in Firefox 98 on Windows. And if I add .ag-menu { scrollbar-gutter:stable }, that makes the horizontal scrollbar go away (fixing that issue).

At that point, if use devtools to delete content from the scrollable element so that the vertical scrollbar goes away as well, then we do still continue to reserve space for the vertical scrollbar (because of the scrollbar-gutter:stable) -- so that does appear as some extra padding on the right side of the component, and the centered contents look slightly off-center as a result.

I suspect that's the uneven thing you were talking about in bug 764076 comment 28 -- is that right?

I think that's a legitimate unfortunate-outcome of this current scrollbar-gutter suggested-workaround; hopefully it's not a concern in many cases (e.g. if for use cases where the content isn't expected to be precisely centered in the overflow:auto component). But if you do want the content to look centered -- particularly if it needs to look centered in the area-excluding-the-visible-scrollbar regardless of whether a scrollbar is present (such that either the content has to move or the component has to resize when the scrollbar appears) -- then I'm not sure that's something that can be fixed/worked-around easily right now.

Comment 12

[Guilherme Lopes]

(In reply to Daniel Holbert [:dholbert] from comment #11)

This is ok, I'd just like this to be kept open for future consideration, not sure if part of bug 764076 or if this one should be reopened.
Since this issue was reported by our customers, I need a bugzilla number to tie it to.

Thanks

Comment 13

[Daniel Holbert [:dholbert]]

Yeah, bug 764076 is probably what you would want to tie it to, if it's about the presence-of-a-horizontal-scrollbar (in an intrinsically-sized overflow:auto element).