Re: box-sizing + intrinsic dimensions

On Tue, Aug 7, 2012 at 12:39 PM, Ojan Vafai <ojan@chromium.org> wrote:
> http://dev.w3.org/csswg/css3-ui/#box-sizing0
> http://dev.w3.org/csswg/css3-writing-modes/#intrinsic-sizing
>
> How should box-sizing affect things that are sized based off intrinsic
> dimensions? Using a box-sizing other than content-box does weird things.
>
> 1. <div style="box-sizing: border-box; border: 2px solid; width:
> min-content">foo</div>
>
> I believe we'd calculate the width as the width of "foo" and then use that
> as the border-box size, which would get you a border that overlaps the text
> (i.e. the text would overflow).
>
> 2. <div style="width:100px"><div style="box-sizing: border-box; border: 2px
> solid; width: fill-available">foo</div></div>
>
> As I read the spec, the border box of the inner div would get set to 96px
> and it wouldn't actually fill the container.
>
> I suppose you're just getting what you ask for here? I'm not sure it's worth
> adding magic to fix these cases. Just want to make sure these cases are
> considered so we can safely ship the intrinsic sizing keywords unprefixed in
> the near-term.

Actually, on giving this a little more thought, I think the magic
isn't terrible.  We'd specify that the value computed by the keyword's
algorithms return an *inner* size, and this would be auto-adjusted by
the box-sizing keyword as appropriate.

This is similar to how Flexbox ignores box-sizing and just talks about
the inner/outer sizes of things, so that the details of handling
box-sizing and width/height properties aren't repeated all over the
place.

~TJ

Received on Tuesday, 7 August 2012 19:46:48 UTC