1874974 - Collapsing css table with very specific stylesheet

Status: NEW

(Core :: Layout: Tables, defect)

Description

[soeren_runow]

Attachment: Screenshot 2024-01-16 233956.png

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

Steps to reproduce:

GENERAL INFORMATION
Minimal code example on: https://jsfiddle.net/noe9c70d/114/
I reduced the code to styles which are necessary to reproduce the bug. For me in production, the easiest fix is to set input display style to inline-grid. Another possibility is to set explicit width of input instead of auto value with aspect-ratio. Or to not to put a flex container as superior parent element around other content. Or to use "real" tables. Or not to use self-styled checkboxes (avoid appearance: none).

REPRODUCE BUG
Resize window (or the displaying area when using jsfiddle). Sometimes it's necessary to minimize/maximize whole firefox window.

Actual results:

The red checkbox is missing due to full table collapse. Additionally, the div containing the checkbox is growing in height "endlessly" (set a border or outline for row container to visualize this).

Reloading the page resets this visual bug.

Expected results:

No collapsing of table, no page growth in height.

Comment 1

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

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