Расчет размера содержимого гибкого элемента с дополнением ⇐ CSS

[Anonymous]

В этой статье о создании равных столбцов с помощью flexbox автор упоминает 2 случая, когда все портится, если некоторые flex-элементы имеют отступы. Итак, у него есть контейнер шириной 600 пикселей и 3 гибких элемента, второй из которых имеет отступ 1rem.
Первый случай — когда мы используем flex: 1. Итак, он описывает следующую проблему:

В итоге у меня есть три элемента div с размером содержимого 0, но средний имеет отступ: 1rem. Это означает, что размер содержимого равен 0, а также отступы в 32 пикселя.
У нас есть 600 - 32 = 568 пикселей для деления поровну вместо 600 пикселей. Все элементы div должны расти с одинаковой скоростью, поэтому 568/3 = 189,3333 пикселей.

Вот код, который он включил в статью: Codepen< /p>
Теперь, во втором случае, он использует flex-basis: 100% и упоминает следующую проблему:

Дело в том, что 100% включает в себя заполнение вычисленных значений (из-за * { box-size: border-box; }, которое, как я предполагаю, для этой статьи используют все). Таким образом, размер содержимого внешних элементов div составляет 600 пикселей, тогда как размер содержимого среднего блока – 600–32 = 568 пикселей.
Это приводит к тому, что окончательная ширина .card составляет 214,483 пикселя, в то время как другие имеют разрешение 192,75 пикселей.

Codepen: Codepen
Теперь я не понимаю, почему , в 1-м случае отступы вычитались из оставшегося пространства и размер содержимого всех flex-элементов был равен (т.е. 0), а во 2-м случае он вычитался из ширины flex-элемента, и они имели разные размеры контента? (В обоих случаях он использовал border-box)
Я уже прочитал этот ответ, и это подтверждается для случая 2, и числа идеальны. Там упоминается, что при использовании border-box flex-basis определяет внешний размер flex-элемента. Итак, сначала из гибкой основы удаляется заполнение для расчета ширины контента, затем отрицательное свободное пространство распределяется в соответствии с алгоритмом гибкого сжатия.
Итак, по этой логике в в первом случае средний элемент должен иметь размер содержимого 0–32 = -32 пикселей, а остальные должны быть 0.
Это упоминается в спецификации относительно размера гибкой базы:
Это упоминается в спецификации относительно размера гибкой базы:
p>

При определении гибкого базового размера минимальный и максимальный основные размеры элемента игнорируются (фиксации не происходит). Кроме того, расчеты размеров, при которых размер поля содержимого равен нулю при применении размера поля, также игнорируются. (Например, элемент с указанным нулевым размером, положительным заполнением и размером поля: border-box будет иметь нулевой внешний базовый размер гибкого элемента и, следовательно, отрицательный внутренний базовый размер гибкого элемента.)

И как это работает?

Подробнее здесь: https://stackoverflow.com/questions/786 ... as-padding