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