How to make flex div take only the needed space?

You might be looking for the display: inline-flex property. It treats its children just like the display: flex property, except it itself does not automatically grow.