Расчет ширины флексбокса при обертывании дочерних элементов ⇐ CSS

[Anonymous]

У меня есть флексбокс с разным количеством дочерних элементов. Все дочерние элементы имеют одинаковый размер (т. е. 96 пикселей). Во флексбоксе включена переноска.
Когда все дочерние элементы помещаются в одну строку, сообщаемая ширина флексбокса меньше, чем предлагает родительский элемент (предполагаемое поведение). Однако как только происходит перенос, flexbox всегда заполняет весь родительский элемент.

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

.flex-container {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
background-color: lightpink; /* for debugging */
}

.flex-item {
text-align: center;
width: 96px;
font-size: 0.8em;
background-color: lightblue; /* for debugging */
}

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

Child 1
Child 2


Child 1
Child 2
Child 3

В этом фрагменте вы можете увидеть поведение: первый флексбокс имеет ширину меньше ширины родительского элемента. Однако второй расширяется до ширины родительского элемента, хотя дочерние элементы не заполняют пространство справа.
Это проблематично, поскольку я хочу центрировать flexbox внутри его родительского элемента. . И это кажется невозможным, когда его ширина совпадает с родительской.
Стоит отметить, что я предпочитаю искать решение без JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/793 ... g-children