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

not sure about your question, but:

DEMO: http://jsfiddle.net/jn45P/

you just need to enable the flexibility on the flex items, using flex-grow:1; to fill up the space

    
a
a
a
a
a



    
a
a
a
a
a


div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */