Making divs inside flex boxes shrink-wrap - css

Question

How would one go about making these div flex boxes shrink-wrap?
Ie. making these:
Into these:
http://jsfiddle.net/frank_o/35hk7L84/1/
As if one were to set flex-direction: row; except I can't have them on the same line.
.main {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>

Answer 1

Here is what you are looking for (change the display of the individual elements):
.main {
display: inline-flex;
flex-direction:column;
}
.other {
color: white;
background: blue;
margin: 10px;
display:table;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
Useful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You can do this using following code.
for more reference and also generating code for flex with all properties you can go through following link
http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655
http://the-echoplex.net/flexyboxes/
.main {
display: inline-flex;
flex-direction: column;
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
</div>

Answer 3

You will get what do u need that is every element having different size with shrinking itself as width of element but without using flex.
.other {
clear:both;
color: white;
background: blue;
margin: 10px;
float: left;
}
<div class="main">
<div class="other">
<p>H</p>
</div>
<div class="other">
<p>Hello world </p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello</p>
</div>
<div class="other">
<p>Hello world12345678</p>
</div>
</div>

Answer 4

I've had sucess with the following:
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;