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

css flexbox
BOverflow picture BOverflow · Jan 8, 2014 · Viewed 59.3k times · Source

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 of the container.

Aside from setting an explicit width on the flex-container, is there a way of just having the equivalent of width: auto to remove the overflow?

Answer

Mahks picture Mahks · Sep 18, 2014

If you mean you want the container to be the width of the items, rather than the items expanding to the container width...

You may be able to get that by changing display:flex to display:inline-flex

Related questions

Better way to set distance between flexbox items

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this. Example

Read More
Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More