W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: [css-grid] Overlapping elements & backgrounds

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Mon, 03 Nov 2014 14:01:03 +0100
Message-ID: <54577C8F.9010209@igalia.com>
To: www-style list <www-style@w3.org>
On 01/11/14 23:32, Tab Atkins Jr. wrote:
> On Sat, Nov 1, 2014 at 1:49 PM, François REMY
> <francois.remy.dev@outlook.com> wrote:
>>>> Another question I had is: it seems Chrome renders the “B” in the
>>>> right padding of the B-box. I call this the “absolute-min-content”
>>>> rendering because it doesn’t even meet the “min-width: min-content”
>>>> requirement. Is it the expected rendering or are we supposed to at
>>>> least meet “min-width: min-content”?
>>>>
>>>> The latter is what I had understood from the spec, but this isn’t
>>>> quite as clear as I would like.
>>>
>>> No, there is no requirement for a box to be min-content sized.
>>> In this case, the B's box is overflowing its cell, and the B itself is
>>> overflowing its content box.  Where did you think such a minimum would
>>> come from?
>>
>> From the fact that you don't "shrink-to-fit" when you stretch-align, but only grow-to-fit. I can see the point of not shrink-to-fitting (even if I believe it should not be the default) but I certainly can't see the point of it if it doesn't even prevent the element to be too small to hold its own content. What's the use case (or reasoning) behind the current Chrome behavior?
> 
> Ah, yes, indeed.  'stretch' will not shrink it below its 'auto' width.
> The 10px column merely provides the containing block width, and layout
> then ends up making it min-content.  (That is, min-content doesn't
> come automatically; it's just that the rendering which falls out
> should be the same as if you'd explicitly requesting min-content
> width.)

Probably I'm missing something but this is rendered the same than if you
just have a regular div with 10px width [1]:
<div style="width: 10px">
  <div style="padding: 20px; background-color: cyan;">B</div>
</div>

The cyan box is 40px width, so it's ignoring the "B" size. Exactly the
same that it's happing on grids.

Should this work in a different way for grids?

Bye,
  Rego

[1] http://jsbin.com/likocovuco/1/edit?html,css,output
Received on Monday, 3 November 2014 13:01:38 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:26 UTC