Skip to content

[css-grid][css-sizing] min-content size of grid container in block axis #3684

Closed

Description

@Loirooriol

https://drafts.csswg.org/css-sizing/#min-content-block-size says

min-content block size: Equivalent to the max-content block size.

https://drafts.csswg.org/css-grid/#ref-for-min-content says

The max-content size (min-content size) of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a max-content constraint (min-content constraint).

So in the block axis it seems CSS Sizing defines the min-content size to be equal to the max-content size, while CSS grid defines them to be different in general.

Usually this is not observable because it's hard to get a min-content size in the block axis, e.g. block-size: min-content behaves as auto. But it's used e.g. in https://drafts.csswg.org/css-flexbox-1/#min-size-auto

The content size suggestion is the min-content size in the main axis

which can be the block axis in a column flex container.

See https://crbug.com/936042 for context. https://jsfiddle.net/9fuL2ecs/

  <div id="flex">
    <div id="grid">
      <div id="item1"></div>
      <div id="item2"></div>
    </div>
  </div>
#flex {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow: hidden;
}
#grid {
  flex: 1 1 0;
  display: grid;
  grid-template-rows: minmax(0, 100px) 100px;
}
#item1 {
  height: 100px;
  width: 100px;
  background: green;
}
#item2 {
  background: red;
}

Chromium used to let the first row be 0px tall, but currently it behaves like Firefox and min-height:auto on the flex item lets the 1st row grow to 100px and no red is shown. Is this right?

Activity

  1. tabatkins commented on Aug 11, 2020

    @tabatkins
    Member

    Looks like this has been fixed since it was reported, the definition of min-content block size is now:

    In general, and definitely for block containers, tables, and inline boxes, this is equivalent to the max-content block size.

    which allows for specific layout algos to override the "in general" wording.

  2. Loirooriol commented on Aug 23, 2020

    @Loirooriol
    ContributorAuthor

    Seems fine, though it's unfortunate that Chromium already had this behavior but changed because of the old css-sizing. I hope changing back will still be web compatible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions