How should we resolve percentage margins and padding on grid and flex items?
The CSS Working Group would like your opinion. There is a longstanding issue in both the CSS Grid Layout and Flexbox specifications.
From the CSS Grid specification:
Percentage margins and paddings on grid items can be resolved against either:
• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)
A User Agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.
Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.
The flexbox specification has the same wording.
What is the problem here?
A percentage has to be resolved against something. If you give a grid item a margin-right of 10%, you would probably expect that 10% to be calculated as 10% of the width of the grid area. What happens however if you give the item a margin-bottom of 50%? Do you expect it to resolve to 50% of the total height of the grid area or do you expect it to calculate 50% from the width? The spec allows for both, and browser implementations are split.
You can see the problem in this very simple CodePen. We have three column tracks which are each 120 pixels in width. The margin-right applied to each track resolves to 12 pixels, 10% of 120.
In Chrome and Safari the margin-bottom resolves to 60 pixels. 50% of the width of 120 pixels is 60 pixels.
In Firefox and Edge the margin-bottom uses the height of the grid area and so in this case resolves to 150 pixels as I have put a height on the grid and items are stretching.
If you remove the height on the grid container you will see how Firefox now completely collapses the container as there is now no height to resolve against. Chrome will keep the container at 60 pixels – that being the margin.
We see the same variance in Flexbox, however in Flexbox we resolve against the flex container as the containing block. However you can see in the below example how Chrome uses 10% of 500 pixels for the margin-right, and 50% of 500 pixels for margin-bottom. Firefox uses 10% of 500 pixels for margin-right and 50% of 300 pixels for margin-bottom.
The fact that percentages resolve from the width is essentially a throwback to the old days of layout on the web where we didn’t have great control over the height of things. The width was the measurement we could control and so became the dominant measurement.
The ‘aspect ratio hack’
One reason to follow the Chrome behaviour here is that it allows the percentage-based padding “aspect ratio hack” to work on flex and grid items. There is an excellent write-up of the interoperability issue on Bram.us – Vertical margins/paddings and Flexbox, a quirky combination, the issue is also detailed on Flexbugs and Gridbugs.
However, perhaps a better solution is to properly solve the aspect ratio issue, while also deciding on one solution for margins and padding in general.
We want your feedback!
The CSS Working Group would love to know your thoughts on this issue. As you can see above this is not an issue when using horizontal percentage margins and padding, this continues to work as it always has done. The issue is with vertical margins and padding. Would you prefer the Chrome behaviour, of the Firefox one? Other than the aspect ratio padding hack, are you using vertical margins and padding for any other reason?
You can comment directly on the GitHub issue with thoughts and use cases. It would be great to get this particular interoperability problem solved.
Cross-posted to rachelandrew.co.uk.
Minutes Telecon 2017-12-13
- Rossen will send out the proposed agenda for 20 December to garner regrets and determine if there are enough people for a call. There will be no call on 27 December.
- Resolved: Resolve to clamp negative calc unit values in context and simplify as early as possible and then return the clamped calc as a result of the computed style.
- Resolved: Change the name
:focus-ring to :focus-visible.
- Rossen brought issue #2085 (Choose a single option for resolving padding and margin percent values of grid/flex items) to the call in order to get more visibility and movement toward a solution. There wasn’t a decision reached on the call, but rachelandrew will make a blog post to garner from the community which behavior is preferable. Most people expressed a desire to make sure that the same decision is applied to Grid & Flexbox to keep them inline.
- As a part of the previous discussion several people have expressed an interest in a permanent solution to the aspect ratio hack and fantasai, TabAtkins, and gregwhitworth have all been looking into writing some spec text.
- There were many concerns that the proposal in issue #1865 (Intrinsic Sizes, Scroll Containers, and Grid/Flex Sizing) would cause severe breakage. fantasai will go out and research if it will cause breakage and, if the result is that there is no compat risk, there was agreement that the proposal would be worthwhile to implement for Flex, Grid, and Block.
Full Minutes
Minutes Burlingame, CA F2F 2017-11-06 Part II: Flexbox, Image Decoding, Line Clamping, Cleaning up OWNERS files, Feedback on Testing Policy, Values & Units, Contains, Line Grids, Line Heights
Flexbox
- dholbert will investigate the Firefox code around sizing images and add more details on their implementation to the issue. His comment is available here.
Full Minutes || Spec Referenced
Image Decoding
- smfr introduced the group to the proposal to expose an API to control background decoding of images. The proposal is available here.
Full Minutes
Line Clamping
- There were two points of discussion, how to address the existing desire to have some of webkit-line-clamp and, if so, how to extend that further.
- The desire is to have a concrete proposal for a webkit-line-clamp like property to further discussion.
Full Minutes
Cleaning up OWNERS files
- Anyone listed on an OWNER file who won’t be reviewing tests was asked to do a PR and remove themselves.
- There was some interest in a bot to notify of unreviewed tests.
Full Minutes
Feedback on testing policy
- The group spent time discussing how the resolution to require tests for CR+ spec has been doing in practice.
- There was a desire to see a bit more nuance in the definition to have the tests become required once there is one implementation, to exclude editorial changes, and to clearly not require testing every possible variation, but to instead be a general test.
- Additionally, there was a desire to add teeth to the policy where changes are not merged into the main until there is a test. However, several people were concerned that that requirement would cause changes never to be merged in instead of the intended addition of tests.
Full Minutes
Values and Units
Full Minutes || Spec Referenced
Contains
- Resolved: Use principal box as the box to which we do paint containment clip. (Issue #1809)
- Discussed whether style containment should be affecting pagination controls within the element. Tab will clarify what style containment is supposed to accomplish in principle so that this issue can be resolved accordingly.
- Resolved: Create new counter scopes at style scoping root for style containment.
- The suggested way to address issue #1457 would be that ‘contain’ would apply to neither inline nor ruby.
Full Minutes || Spec Referenced
Line Grid
- The group reviewed dbaron’s proposal to comprehensively address line spacing.
- The group wanted to make sure that it covered all necessary use cases, but a preliminary pass suggested it would.
- No one was ready to completely replace existing spec test with this proposal, but it will be used when attempting to fix the current spec.
Full Minutes
Line Heights
- Resolved: Take florian’s proposed change to definitive line heights. (Issue #1801)
- Resolved: Take florian’s proposed change for line-height normal (Issue #1802)
- Resolved: To define first available font more strictly in the fonts model and leave it undefined in 2.1 (Issue #1798).
- Resolved: Change the wording such that 2.1 is saying you should define the content area based on the first available font and only that font. (Issue #1804).
Full Minutes || Specs Referenced: CSS Inline CSS 2.1
Minutes Burlingame, CA F2F 2017-11-06 Part I: Sizing, Backgrounds, Grid
CSS Sizing
- Resolved: When finding the min-content size of a replaced element with no intrinsic size, if there is a specified min-width or min-height use that rather than 300px/150px. (Adjusting a previous resolution on issue #951)
- Resolved: Add textarea content-based sizing to Sizing L4.
- TabAtkins will add auto sizing of iframes into the WICG, since there are complexities involving interaction with media queries, security, and layout engine architectures that need to be worked out in detail, and solutions might involve non-CSS technology (HTML, HTTP).
- Resolved: Don’t remove stretch / fit-content from min-width/height.
- Discussed the proposal to address issue #1865, Intrinsic size of ‘overflow: auto/scroll’ and its impact on auto-sized grid/flex item ancestors
- Resolved: Pending approval from dbaron, the group accepts the proposed text to define which replaced elements are affected by width: % rule zeroing min-content with an addendum to add “button-like” things to the list.
- Resolved: Move definition of the
min-width:auto keyword to Sizing.
- Resolved: Move the box-sizing property from UI 4 to Sizing.
Full Minutes || Spec Referenced
CSS Backgrounds
- Resolved: Text color has no effect on background-clip.
- Resolved: text-decorations should be considered as part of the text shape for background-clip purposes.
Full Minutes || Spec Referenced
CSS Grid
- Resolved: Option D: percentage gaps in shrink-wrapped grids contribute 0 and layout as 0. (Issue #509)
- Resolved: Percentage tracks sized as percentage resolve the same way for columns and rows, which involves a second layout pass in some cases.
- The request for “Equal Gutters in both axes” feature (Issue #1116) was presented and those interested continued talking over lunch.
Full Minutes || Spec Referenced
Minutes Telecon 2017-12-06
- Everyone was requested to review the major update to fold in width/height & box-sizing propdefs.
- Resolved: Rename
scroll-snap-margin to scroll-margin.
- Resolved: Request an updated CR for CSS Scroll Snap.
- There were two possible solutions to issue #434 (Computed value of a negative calc unit that doesn’t allow negative lengths):
- Clamp as early as possible based on values.
- Clamps as early as possible based on the property.
- The group was moving toward option #1, but that would lead to not preserving calc to which there had been objections in other cases. A note will be added to the issue to look back at the reasons for previously wanting to preserve calc and see if those reasons apply in this case as well.
- Resolved: Mark
image in symbol at risk in Counter Styles.
- The group did intend the implementation breaking change resolved in issue #1921 (Percentage tracks and indefinite sizes). The timing of implementing this change will depend on results from the usage counter being run as well as implementation complexity and browser coordination.
- Resolved: Request publication of new Grid CR.
- The group didn’t reach a conclusion on issue #2037 (
:link and :visited are not mutually exclusive in implementations) however there was agreement that the spec text didn’t align with most implementations and that Edge will likely need to change their implementation.
Full Minutes
Minutes Telecon 2017-11-22
- The group was reminded of the upcoming end of year publication deadline.
- tantek announced that he’s making progress on the scrollbars ED and hopes to ask for FPWD in a few weeks.
- Resolved: Add birtles as an editor for Transitions.
- Resolved: Publish a new WD of Transitions.
- Resolved: Publish a new WD of Animations.
- Resolved: Publish new CR of Color L3
- Resolved: Publish updated CR of Counter Style once there are tests linked for each non-editorial change.
- Resolved: When the track depends on the size of its contents and the item depends on the size of the track it cannot be baseline aligned.
- Resolved: Accept the proposed change in the last comment of #1039 (“do an early collection of baseline-aligned things, calculate how tall they are and baseline align them, then add “shims” to their margin to maintain this alignment thru the intrinsic sizing calc.”)
- The authors plan to request publication for Grid this year and the group requested that tests for any changes resolved today be included at time of request.
- Resolved: Use ‘multicolumn container’ in the Multicol draft
- There will not be a call on 27 Dec. A doodle will be set up to see if people are available for a call on 20 Dec and 3 Jan.
Full Minutes
Minutes Telecon 2017-11-01
- astearns created a bunch of tests for clamping behavior and requested review before TPAC
- Resolved: Publish an updated CR of CSS UI 3.
- Text Decoration 3 should be ready for CR as soon as internationalization finishes their review.
- Resolved: Remove this (Override Declarations) from both levels of CSS Cascade and replacing the reference with a note.
- Resolved: Take ‘stretch’ and ‘fit-content’ to CSS Sizing level 4 and drop a note in level 3 noting where they went and pointing to next level.
- The github issue to restrict ‘stretch’ and ‘fit-content’ to width/height and max-* (excluding min-*) didn’t have any strong opinions. Individuals were encouraged to review and see if they can think of a use case before TPAC.
Full Minutes
Minutes Telecon 2017-10-25
- Resolved: Take CSS UI 3 to PR.
- Resolved: Take CSS UI 4 to an updated WD.
- Resolved: Re-point CSS UI link to CSS UI 4 spec.
- Resolved: Publish a new Fonts 3 CR.
- Though the group is generally supportive of the effort to incorporate better typography in issue #1888, the proposal to change
sup and sub has a very high likelihood of causing breakage. This should instead be filed as a bug against Fonts 4 or 5 as a proposal to change CSS. Any request should also have test cases to demonstrate what would be different between the current and proposed approach.
- Resolved: Add the statement that stroke should follow the curve of the glyph as well as adding a non-normative note that points out anything captured in the Github issue and add better pictures.
- The remaining open topics on issue #509 (percentages and intrinsic sizes) will be discussed at the F2F.
- Resolved: Have the mid-2018 meeting held week of July 2nd in Sydney with Google as host.
Full Minutes
Minutes Telecon 2017-10-18
- There is a request to add needed tests to the flexbox test suite.
- There is a need to find out from implementors if they want to standardize on
Element.focus and, if yes, on what.
- The two behavior options are detailed here with both options having multiple implementations.
- There was general support to standardize, but not enough implementors were available to decide on which path.
- Discussion then turned to if
ScrollIntoView is necessary given the existence of scroll snap. If it is needed, there’s also a need to define how it would interact with the scroll snap properties.
- Discussion for both
Element.focus and ScrollIntoView will continue on GH and may need to be split into sub issues to decide what the default should be, what options should be available to override the default, and how do the overrides interact with scroll snap.
- Resolved: Change the definition of cursor auto to look like text over selectable text in CSS UI 3.
- Resolved: Add exception for editable text into L3 of UI.
- There are two open items around percentage size that still need to resolved:
- Should the block and inline axis be resolved symmetrically or asymmetrically? (Summarized here)
- What to do with percentage gaps? (Summarized here)
- Both items have examples in the github issue, so everyone was asked to review and add their thoughts to the issue to help reach a resolution.
- Resolved: Accept
hue-rotate as an exception to unitless values.
Full Minutes
Minutes Telecon 2017-10-11
- Resolved: Close issue #1777 (Reconsider the meaning of 1fr) no change
- fantasai will create a separate issue to investigate her proposal to reduce the confusion that lead to the 1fr issue (Her initial proposal is in this comment.)
- Resolved: We want the interpretation to be the first option in issue 1832.
- Resolved: Treat invalid counter-styles the way we treat invalid font faces.
- Resolved: Leave shepherd issues in shepherd, make it possible to mark them closed, file issues per test suite in WPT pointing at that test suite’s issues in shepherd.
- Working group members were reminded to put their name on the wiki if they plan on attending the Houdini meeting on the Thursday of TPAC
- The group will wait for the ‘superseded’ status that’s a part of the 2018 plan to add a label to CSS1 instead of marking it as obsolete.
- Resolved: Use Q (upper case) in spec but add a note that it’s serialized as lower case.
Full Minutes
![[Photo: group photo of the CSS working group in San Francisco]](/Style/CSS/csswg-2016.jpg)
Contact: