Why width of flex container with max-content has different width than flex item?

I want to understand why the parent flex container with width specified as "max-content" has different width than the lone inflexible child flex item.

As per my understanding of Flexbox intrinsic size specification, the child has correct width, but the parent is not honouring the main-size max-content contribution of child.

Here is the JSFiddle: https://jsfiddle.net/c0f5xwn0/

<div style="width:max-content; display:flex;border:1px green solid;">
    <div style="height:100px; flex:0 0 100px; border:1px red solid; width:200px">Why parent div has more width than child?</div>
</div>

Can someone please explain the reason behind this?

At the present time, the max-content value has weak support among major browsers.

Currently:

• it is not supported by Edge
• it has lots of issues in Firefox
• it has some issues in Chrome and Safari

See here for the complete picture: https://caniuse.com/#search=max-content

Assuming you are testing in Chrome, the main problem is your use of the flex-basis property. The flex item has:

flex: 0 0 100px /* fg: 0, fs: 0, fb: 100px */

According to the documentation linked to above, max-content does not recognize flex-basis in Chrome. Therefore, use width instead:

<div style="width:max-content;display:flex;border: 1px green solid;">
    <div style="height:100px;width: 100px;border: 1px red solid;">Why parent div has more width than child?
  </div>
</div>