min-width does not expand with flexbox content

Question

After some great help from "nico-o" in a previous topic learning me about flexbox, i'm unfortunately stuck with another problem.
The .content div simply does not expand with the flexbox divs inside it, giving .content div min-width property of 100px (same width as divs inside), but when the divs inside the .content div grows in numbers the .content div does not expand to the right to fit more divs. Example http://jsfiddle.net/807/LKgbx/52/

the divs just simply overflow outside the .content div, the problem is that if i place another .content div next to it it does not see the overflow. Example http://jsfiddle.net/807/ggcg8jgq/5/

+================+
|+--------------+| +--------------+
||              || |              |
||              || |              |
|| 100 x 100 px || |  i'm outside |
||              || |      :(      |
||              || |              |
||              || |              |
|+--------------+| +--------------+
|+--------------+| +--------------+
||              || |              |
||              || |              |
||              || |  i'm outside |
||              || |      :(      |
||              || |              |
||              || |              |
|+--------------+| +--------------+
|+--------------+|
||              ||
||              ||
||              ||
||              ||
||              ||
||              || 
|+--------------+|
+================+

The Question:

• Why isnt the .content div expanding its min-width to fit the content?

Thanks in advance! , 807

Answer 1

you just have to change the style of your .content-wrap class from :

.content-wrap {
width: 100%;
height: 90vh;
background-color: #963;
}

to

.content-wrap {
width: 100%;
display: inline-block;
height: auto;
background-color: #963;
}

hope i help!