w3c / w3c/csswg-drafts

[css-sizing] clarification around Compressible Replaced Elements and min-content size

Open
#5,665 27 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Commenter Response Pending css-sizing-3
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

5.2.2 Compressible Replaced Elements applies to 5.2 Intrinsic Contributions. Does it also apply to 5.1 Intrinsic Sizes?

The answer affects the size of <input> below because the flexbox will respect the min-content size of the <input> element when shrinking.

<div style="display: flex; width: 150px;">
  <div style="flex: 0 0 100px;"></div>
  <input style="width: 100%">
</div>

https://jsfiddle.net/pfv2x6sd/1/

Indications that 5.2.2 applies to 5.1:

  • The text of 5.2.2 explicitly says min-content size, which is clearly in the purview of 5.1: The following elements can have their min-content size compressed

Indications 5.2.2 does not apply to 5.1:

  • 5.2.2 is only in the 5.2 section, not an independent section like a hypothetical 5.3
  • 5.2.2 refers to 5.2.1 for clarification about when min-content sizes can be "compressed"

Chrome behaves as if 5.2.2 applies to 5.1. Firefox behaves as if it does not apply. (In an unlikely scenario, the implementors of the respective engines think the other engine is right.)

Can we get this part of the spec clarified so we know how to size the <input> element in the above example? One suggestion from the chrome bug is

  1. Replace "compressible" with a clearer term
  2. Make sure the two places match about whether this affects min-content size or contribution

The firefox bug is at https://bugzilla.mozilla.org/show_bug.cgi?id=1585485

/cc @dholbert @cbiesinger who I've been discussing this with

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

Review the CSS Sizing draft's sections 5.1, Intrinsic Sizes, and 5.2.2, Compressible Replaced Elements, then compare the linked Chrome and Firefox reports with the provided flexbox example. Done means the specification explicitly resolves whether 5.2.2 applies to 5.1 and clarifies how the input is sized.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
documentation, frontend, web-dev
Issue type
Documentation
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.