How do I set a flex-container to be the width of its flex-items?

Question

I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the flex items taking less space than the size o

Answer 1

As suggested by Mahks, you can make the flex container inline. But if laying it inline is not suitable for your layout, an alternative is to float the flex container (not the flex items).

Floats will shrink-wrap to fit their contents, and this is no different for a block-level flex container. An inline-level flex container behaves similarly to an inline-block box when laid out in its parent inline formatting context, which means it will also shrink to fit its contents by default.