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

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid][css-sizing] min-content size of grid container in block axis ==
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>
#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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3684 using your GitHub account

Received on Wednesday, 27 February 2019 18:51:54 UTC