w3c / w3c/csswg-drafts

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

Open
#8,690 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-align-3
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

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 https://github.com/whatwg/html/issues/9123.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the css-align fieldset behavior described here, the linked HTML fieldset and anonymous content box rules, and the provided column-flexbox example. Consider the interaction with WHATWG HTML issue 9123; done means the specifications clearly resolve whether justify/align properties apply to fieldset-generated principal boxes and define the example's expected behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.