Shrinking flexbox container to contents

[inktrap]

I’ve been struggling trying to do this. Is there a way to make the flexbox container shrinkwrap its contents – for example, like display: table; does?

[Beverleyh]

I have no idea what you mean but if you mock something up for us in a CodePen demo – include a basic flexbox and display:table; sample side-by-side to show us what you mean – we can offer suggestions.

[Paulie_D]

Sure there is…display:inline-flex

http://codepen.io/Paulie-D/pen/VPJLXN

[mmcgu1966]

OOHH.. NICE. Didn’t know that one either. Thanks Paulie_D

[inktrap]

Thanks. That did the trick because I happen to have only one inline-flex container in the parent block, but the problem in general is that it will stack containers side-to-side instead of vertically. I don’t suppose there’s a way to avoid that?

[Paulie_D]

Not really, inline-flex works the same way as any other inline element, span, inline-block, inline-table etc.

If you want more than one “container” you may have to think about how you are structuring your HTML.

[Author]

Posts