Почему вложенные элементы flexbox сжимаются по-разному? ⇐ CSS

[Anonymous]

В следующих вложенных флексбоксах .a и .c имеют значение flex-shrink, равное 1 (оба уменьшаются по сравнению с базовым размером 700 пикселей), но все элементы в конечном итоге имеют разные размеры друг от друга. Почему?

Код: Выделить всё

.outer {
width: 500px; /* to avoid confusion about different viewport sizes */
}
.a {
width: 700px; /* flex-basis doesn't work */
}
.b {
min-width: fit-content;
}
.c {
flex-basis: 700px;
flex-grow: 0;
}
.flex {
display: flex;
}
div {
min-width: 0;
outline: 1px solid black;
}

Код: Выделить всё

 a
bbbbbbbbbbbbbbbbbbbb

c

Возникает вопрос об изменении этого кода, чтобы они имели одинаковый размер, тогда как здесь я хочу понять, почему они вообще имеют разные размеры, то есть как эти размеры вычисляются. Эти вопросы довольно сложны и сильно отличаются друг от друга - решение одного из них не является ни необходимым, ни достаточным для решения другого.
@Downvoters:

• Мои исследовательские усилия:
  
  Я пробовал много-много модификаций кода, чтобы разбить это явление на более простые и посмотреть, как разные элементы влияют друг на друга.
• Я также изучил спецификацию - там вопрос о том, является ли родительский или дочерний элемент флексбокса также флексбоксом, покрыт слоями абстракции, и не объясняется напрямую и не является тривиальным вывод о том, как вложенные флексбоксы (довольно распространенный шаблон) влияют на размеры друг друга. Так что я считаю, что это нормальная тема для вопроса о переполнении стека.

[*]Почему это полезно для некоторых людей: флексбоксы могут быть вложены друг в друга, это уместно в некоторых ситуациях. В некоторых случаях полученные размеры противоречат здравому смыслу, как описано выше. Понимание того, как рассчитываются размеры, полезно для достижения определенных целей дизайна.


Подробнее здесь: https://stackoverflow.com/questions/798 ... ifferently