1717095 - Table inside an inline-block overflow not rendered correctly

Status: RESOLVED DUPLICATE of bug 764076

(Core :: Layout: Block and Inline, defect)

Description

[Peter Brand]

Attachment: testSticky2.htm

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

To center a table on the page, used a table within an inline-block div with auto margin, within a text-align center div.

Actual results:

In FireFox the width of the table appears to be calculated too short so either the vertical scrollbar overlays content forcing a horizontal scrollbar (if there is no wrapping in any of the table cells) or cells wrap unnecessarily. See screenshot attached.

Expected results:

Width of table should be calculated correctly so that the scrollbars and content are rendered correctly. See screenshots of Chrome and Edge attached.

Comment 1

[Peter Brand]

Attachment: As rendered by FireFox

Comment 2

[Peter Brand]

Attachment: As rendered by Chrome 91.0.4472.114 64 bit

Comment 3

[Peter Brand]

Attachment: As rendered by Edge Version 91.0.864.48 (Official build) (64-bit)

Comment 4

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Block and Inline' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 5

[Daniel Holbert [:dholbert]]

This is a version of longstanding bug 764076.

See bug 764076 comment 7 for a little bit of explanation (and see Mats's comments further down, which indicate that this is differently-broken in Chrome; i.e. nobody has a complete solution for this).

You can sort-of workaround this by using overflow-y: scroll instead of auto, since that instructs the browser to reserve space for the scrollbar.; though of course this means you'll see a scrollbar track even when it's not needed, which is a little unsightly.

There's also a CSSWG proposal for a property scrollbar-gutter (tracked in bug 1715112) which will give another workaround here, to allow you to reserve space for scrollbars without drawing the scrollbar track (until/unless it's needed). We don't implement that yet, though.