CSS when inline-block elements line-break, parent wrapper does not fit new width

You can’t. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:
min(max(preferred minimum width, available width), preferred width).

Then,

• When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
• When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
• When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don’t like it.

If you really don’t want this, I guess you could add a resize event listener with JS, and set the desired width manually.