Почему ширина флекс-контейнера с максимальным содержимым отличается от ширины флекс-элемента?

Question

Я хочу понять, почему родительский гибкий контейнер с шириной, указанной как "max-content", имеет ширину, отличную от одинокого негибкого дочернего гибкого элемента.

Согласно моему пониманию спецификации внутреннего размера Flexbox, дочерний элемент имеет правильную ширину, но родительский элемент не учитывает вклад максимального размера дочернего элемента в основной размер.

Вот 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>

Может кто-нибудь объяснить, пожалуйста, причину этого?

Answer 1

В настоящее время max-content Значение имеет слабую поддержку среди основных браузеров.

В настоящее время:

• это не поддерживается Edge
• у него много проблем в Firefox
• у него есть некоторые проблемы в Chrome и Safari

Смотрите здесь для полной картины: https://caniuse.com/

Предполагая, что вы тестируете в Chrome, основная проблема заключается в использовании вами flex-basis имущество. Гибкий элемент имеет:

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

Согласно документации, указанной выше, max-content не признает flex-basis в хроме. Поэтому используйте width вместо:

<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>

Answer 2

Ширина дочернего элемента div объявляется как 200px, Содержимое внутри дочернего элемента div привязывается к flex:0 0 100px, Родительский div корректируется для width:200px приписывать. Путем изменения width в 100px родительский div теперь такого же размера.