Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-overflow-3] Propagating margin overflow of flex items outside of the flexbox #9194

Open
sammygill opened this issue Aug 15, 2023 · 3 comments
Open

[css-overflow-3] Propagating margin overflow of flex items outside of the flexbox #9194

sammygill opened this issue Aug 15, 2023 · 3 comments
Labels
css-overflow-3 Current Work

Comments

@sammygill
Copy link

I believe this discussion would also be valid for grid items, but I'll just focus on flex here.

<div style="display: flex; ">
    <div style="width: 50px; height: 50px; background-color: green; margin-right: 3000px; flex-shrink: 0;">
    </div>
</div>

In the above test case none of Safari, Chrome, or Firefox provide a horizontal scrollbar on the viewport. As far as I can tell, according to https://www.w3.org/TR/css-overflow-3/#scrollable, the margin of the flex item should contribute to the scrollable overflow and as a result create a horizontal scrollbar on the viewport. Setting overflow: scroll on the flexbox creates a scrollbar, which seems to be in line with the spec, so I feel like it should also generate on on the viewport for the overflow: visible case.

Is there some spec language here that should be changed or do all 3 implementations mentioned above have a bug that should be resolved?

Depending on the resolution the following WPT test may need to change as it does not seem to expect a scrollbar: http://wpt.live/css/css-flexbox/flexbox_stf-table-singleline-2.html
@bfgeek
Copy link

bfgeek commented Aug 15, 2023

See: #8660 (comment)

@bfgeek
Copy link

bfgeek commented Aug 15, 2023

We'd prefer if the margin clause was removed from the spec, and we just relied on the inflow-bounds for cases like this.

@fantasai
Copy link
Collaborator

@bfgeek So if I understand correctly, what you're suggesting is that

  • for flex container scrollers, scrollable area will include the margin boxes of all items (effectively)
  • for grid container scrollers, scrollable area will include the grid and the border boxes of all items; margins that overflow the grid itself will not be counted
  • for block container scrollers, scrollable area will include
    • in the block axis, the in-flow children and their margins, plus any floats participating in this formatting context plus their margins, plus the border box bounds and overflow (recursively) of descendants (but not their margins)
    • in the inline axis, ???

@Loirooriol Loirooriol added the css-overflow-3 Current Work label Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-overflow-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@fantasai @bfgeek @Loirooriol @sammygill