Дочернее заполнение flexbox нарушает распределение ширины ⇐ CSS

[Anonymous]

Рассмотрим простую настройку флексбокса с двумя столбцами, используя flex: 1 (или flex: 1 1 0% ) как для левого, так и для правого столбца. Обычно столбцы имеют одинаковый размер.
Когда вы добавляете неравные отступы (см. фрагмент), столбцы больше не имеют одинакового размера.
У меня есть размер окна: border-box, и Gemini посоветовали мне попробовать min-width: 0 (иногда мне это удавалось), ни один из этих вариантов не работал.

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

* { box-sizing: border-box; }

.flex { display: flex; }

.flex > * { flex: 1 1 0%; min-width: 0; font-weight: bold; color: white;  }

.left { background: blue; padding: 5em; }
.right { background: red; }

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

Left
Right

Так должен работать flexbox? Почему здесь не работает box-sizing: border-box?
Я бы предпочел не жестко задавать ширину определенных столбцов. Я смогу добавить в этот макет третий столбец, чтобы было три равных столбца, без необходимости жестко задавать ширину каждого столбца?

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