w3c / w3c/csswg-drafts

[css-align] percentage gap definition should be clearer for the block direction

Open
#4,664 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Closed Accepted as Editorial Commenter Response Pending css-align-3
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

https://drafts.csswg.org/css-align-3/#propdef-row-gap

Consider this testcase:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=7659
Should the flexbox height (the black border) expand to include the full flex line?

There is an indefinite height. The pre-gap flexbox height would be 100px. What Firefox does is compute the gap at 50% * 100px = 50px, so the content is now 150px high, but it keeps the flexbox height at 100px.

The spec should be clearer on how this works:

  • Should percentages resolve against an indefinite height?
  • If yes, should it affect the intrinsic block size of the flex container?

cc @dholbert

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 Level 3 row-gap definition linked in the issue and reproduce the linked flexbox testcase. Review the six-comment discussion, then clarify the normative treatment of percentages with indefinite block sizes and their effect on intrinsic block size; done means the specification answers both questions unambiguously.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.