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.
>
>
>
min-content on the container should use 200px in this case.

But only if you will add this:

.child {
    display:inline-block;
    height: 20px;
    width: 200px;
    background-color: pink;
    min-width:min-content; /* <<<< this <<<<< */
}

then container shall contain .child content in full (without any overflow).


-- 
Andrew Fedoniouk.

http://terrainformatica.com