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.

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

[css-align] justify/align have double effect in fieldsets? #8690

Open
davidsgrogan opened this issue Apr 6, 2023 · 0 comments
Open

[css-align] justify/align have double effect in fieldsets? #8690

davidsgrogan opened this issue Apr 6, 2023 · 0 comments
Labels
css-align-3 Current Work

Comments

@davidsgrogan
Copy link
Member

davidsgrogan commented Apr 6, 2023

HTML specifies that fieldset elements generate a principal box that establishes a box formatting context. Then, the anonymous fieldset content box inherits the justify/align properties from the fieldset element.

So, the justify/align properties take effect in the anonymous content box AND the principal box.

Things get hairy with column flexboxes:

<fieldset style="display: flex; flex-flow: column; align-content: end; width: 200px; min-height: 200px;">
  <div style="width: 100px; height: 100px;"></div>
</fieldset>

If align-content: end applies in both principal and anonymous boxes, then the 100x100 square will be on the bottom right of the fieldset: the principal box moves the anonymous box to the bottom because that's what align-content: end does in block flow, then the anonymous box moves the flex item to the right, because that's what align-content: end does in column flexboxes.

For simplicity, can we change css-align to require that {justify/align}-{items/content} properties don't take effect in fieldset-generated principal boxes?

This is a bit intertwined with the proposal to change how the anonymous content box's height is derived at whatwg/html#9123.

@bfgeek bfgeek added the css-align-3 Current Work label Apr 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-align-3 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants