I have a flexbox with a varying amount of children. All children have the same size (i.e., 96px). The flexbox has wrapping enabled.When all children fit in the same row, the flexbox's reported width is less than what the parent offers (intended behaviour). However, as soon as wrapping happens, the flexbox always fills the entire parent.
.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 */}<div style="width: 250px"><div class="flex-container"><div class="flex-item">Child 1</div><div class="flex-item">Child 2</div></div><div class="flex-container" style="margin-top: 32px"><div class="flex-item">Child 1</div><div class="flex-item">Child 2</div><div class="flex-item">Child 3</div></div></div>In this snippet you can see the behaviour: The first flexbox has a width less than the parent's width. The second one, however, expands to the parent's width, even though the children do not fill up the space on the right.
This is problematic because I want to center the flexbox inside its parent. And it seems impossible when its width matches the parent.
It is worth to note that I am preferably looking for a solution without JavaScript.
