Re: [css-sizing][css-grid][css-flex] Definite/indefinite size in positioned/floated grid containers

BTW, this also affects Flexboxes, right now the output in Chrome Canary
and Firefox are different in a very simple case like:
  <div style="display: flex; position: absolute;">
    <div style="width: 50%; background: lime;">item</div>
  </div>

In Chrome it takes the whole width of the word "item" (as it considers
the flexbox size as indefinite and cannot resolve the percentage),
in Firefox the 50% is applied like if it was a regular block (not a
flexbox).
You can check it live at:
  http://jsbin.com/fenuzo/1/edit?html,css,output

It'd be nice to verify what's the expected behavior, as maybe we did a
mistake trying to implement it in Chrome.
We're getting regressions in some pages and apps, due to this change, so
it'd be great if we can solve it soon.

Thanks,
  Rego

On 20/04/16 11:18, Manuel Rego Casasnovas wrote:
> Hi,
> 
> this is a new doubt similar to an old thread [1].
> 
> The first question is related to percentage tracks in a positioned grid
> container. This is the text from the spec [2]:
> "If the inline or block size of the grid container is indefinite,
>  <percentage> values relative to that size are treated as auto."
> 
> Let's use an example of a very simple grid:
> <div style="display: grid; position: absolute; font: 25px/1 Ahem;
>             grid-template-columns: 50%;">
>   <div>XXXX</div>
> </div>
> 
> If I understand it correctly, this grid has an indefinite width, so the
> size of the column should be the same than if we use "auto" (e.g.
> grid-template-columns: auto;). In this example it should be 100px.
> Is this the expected behavior?
> 
> However, if we compare this with how regular blocks behave, we see that
> it's quite different.
> An example with regular blocks:
> <div style="position: absolute; font: 25px/1 Ahem;">
>   <div style="width: 50%;">XXXX</div>
> </div>
> 
> In this case 50% is resolved against the intrinsic size of the
> container, which is 100px, so the final size for the element is 50px
> instead of 100px (like in a grid).
> I guess it's fine that the behavior of regular blocks vs grid is
> different, but I'd like to confirm it.
> 
> 
> As a related note, I'd like to confirm that the size of a floated grid
> container is indefinite too.
> So reusing the example:
> <div style="display: grid; float: left; font: 25px/1 Ahem;
>             grid-template-columns: 50%;">
>   <div>XXXX</div>
> </div>
> 
> Again the size of the column here should be 100px. Is it right?
> 
> 
> Last, I've created an example showing the differences between regular
> blocks and grid containers. You can check it live at:
> http://jsbin.com/parigo/1/edit?html,css,output
> I'm attaching the output in Chrome Canary where grdi tracks are 100px,
> however in Firefox they're 50px.
> Just for reference, all these questions come from a discussion on a
> Firefox bug [3].
> 
> 
> Thanks,
>   Rego
> 
> [1] https://lists.w3.org/Archives/Public/www-style/2015Nov/0074.html
> [2]
> https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-percentage
> [3] https://bugzilla.mozilla.org/show_bug.cgi?id=1264607
>

Received on Wednesday, 4 May 2016 09:09:40 UTC