Re: min-content/max-content computation WAS: [css3-flexbox] Does "width" property on a flex-item affect its used value of "min-width:auto"?

On Mon, Jan 7, 2013 at 10:51 AM, Ojan Vafai <ojan@chromium.org> wrote:
> Ugh. I spoke too soon. I went to fix this and realized that this is a more
> general problem than just the flexbox issue. There are a couple questions
> that are not clearly spelled out in the spec when you specify both min-width
> and width.
>
> <style>
> .container {
>     min-width: min-content;
>     width: 100px;
>     height: 40px;
>     background-color: blue;
> }
> .child {
>     display:inline-block;
>     height: 20px;
>     width: 200px;
>     background-color: pink;
> }
> </style>
>
> <div class=container>
>   <div class=child></div>
> </div>
>
> <div class=container>
>   <div class=child>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
> </div>
>
> 1. Should container always always be 100px or should min-content override
> it?
> 2. Should the min-content on the container use the child's min-content or
> it's 200px width?
>
> Testcase: https://bug-106143-attachments.webkit.org/attachment.cgi?id=181530
> Screenshot in IE9, FF17 and Chrome tip of tree:
> https://bug-106143-attachments.webkit.org/attachment.cgi?id=181529
>
> I can see valid arguments for either of the three existing behaviors.

<http://www.w3.org/TR/CSS21/visudet.html#min-max-widths> is clear -
max-width always wins over width, and min-width always wins over both.
 So that clearly answers #1.

The answer to #2 is harder to read from 2.1, but it's there.  It's
easier to read in the Sizing spec, in
<http://dev.w3.org/csswg/css3-sizing/#block-intrinsic>.  (Note that a
display:inline-block box is a block, not an inline.  It's
inline-*level*, though.)  To find the min-content size of .container,
you ask all of its children for their min-size contribution.  For
definite sizes, it's just that size.  So, #2 uses the child's 200px
width.

~TJ

Received on Monday, 7 January 2013 20:37:12 UTC