Разница между max-content и flex-basis при распределении свободного пространства во флексбоксах заключается в их функциях.
Max-content — это максимальный размер содержимого, которое может вместить элемент. 13 Если элемент содержит текст без форматирования, то он будет отображаться в виде одной длинной непрерывной строки. 13
Flex-basis — это база, от которой рассчитывается размер. 1 Если установить flex-basis равным 0, а flex-grow равным 1, то все элементы не будут иметь начальной ширины, поэтому пространство во flex-контейнере будет распределено равномерно, назначив одинаковый размер пространства для каждого элемента. 13
Таким образом, max-content определяет максимальный размер содержимого, а flex-basis — базу для расчёта размера элементов при распределении свободного пространства.