Make flex container expand and overflow its container

Question

How do I make a flex parent with a nowrap flex-wrap expand to fit its content even if that means overflowing whatever is wrapping the parent?

Basically, the content has a min-width, I want the flex parent not to shrink more than the space all the flex items need.

Here is a JSFiddle https://jsfiddle.net/lazamar/odat477r/

 .wrapper { background-color: yellowgreen; display: block; padding: 10px; max-width: 180px; } .parent { display: flex; flex-flow: row nowrap; background-color: yellow; } .child { display: block; background-color: orange; margin: 10px; min-width: 50px; }

 <div class="wrapper"> <div class="parent"> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> </div> </div>

Answer 1

Using display: inline-flex instead of display: flex is your best bet.

If, for any reason, that's not an option, use CSS positioning properties.

 .wrapper { background-color: yellowgreen; display: block; padding: 10px; max-width: 180px; position: relative; /* new; set bounding box for flex container */ min-height: 40px; /* new */ } .parent { display: flex; flex-flow: row nowrap; background-color: yellow; position: absolute; /* new; remove flex container from document flow */ } .child { /* display: block; <-- not necessary */ background-color: orange; margin: 10px; min-width: 50px; }

 <div class="wrapper"> <div class="parent"> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> </div> </div>

Answer 2

The answer is what t1m0n said. Use display: inline-flex instead of display: flex for the parent.

 .wrapper { background-color: yellowgreen; display: block; padding: 10px; max-width: 180px; } .parent { display: inline-flex; /* -- only change --*/ flex-flow: row nowrap; background-color: yellow; } .child { display: block; background-color: orange; margin: 10px; min-width: 50px; }

 <div class="wrapper"> <div class="parent"> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> <div class="child">Content</div> </div> </div>