- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Wed, 27 Feb 2019 18:51:52 +0000
- To: public-css-archive@w3.org
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/
```html
<div id="flex">
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
</div>
</div>
```
```css
#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