Vertical floating divs - overflow to the right - html

Question

The content div contains an X amount of divs inside of it, but what i would wand is that the divs inside the content div to float(open for sugestions) from top to bottom instead of left to right.
and when the divs in the content div reaches it max-height the divs inside the content div overflow to the right and start over from top to bottom (as shown in the example below), and so, stretch the content divs width to fit a new row.
I also would like to make it work in mobile browsers.
css---------------------------------------:
.content {
float: left;
min-width: 100px;
height: 95%;
}
.block {
float: left;
width: 100px;
height: 100px;
}
html---------------------------------------:
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div><!-- end content -->
My questions are:
1: how can i let the divs(inside the content div) float from top to bottom.
2: when the content div reached the max-height how can i let the divs float next to eachother and start a new vertical row.
+ ==== content ==== + + ==== content ====================== +
| +---------------+ | | +---------------+ +---------------+ |
| | | | | | | | | |
| | div 1 | | | | div 1 | | div 4 | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| +---------------+ | | +---------------+ +---------------+ |
| +---------------+ | | +---------------+ +---------------+ |
| | | | | | | | | |
| | | | | | | | | |
| | div 2 | | when more then 3 divs vertacly | | div 2 | | div 5 | |
| | | | i wand it to expand horizontaly | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| +---------------+ | | +---------------+ +---------------+ |
| +---------------+ | | +---------------+ |
| | | | | | | |
| | | | | | | |
| | div 3 | | | | div 3 | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| +---------------+ | | +---------------+ |
+ ================= + + =================================== +
Thank you in advance!

Answer 1

You can do so using display: flex; and flex-direction: column
Here is a demo: http://jsfiddle.net/hpy3vt1s/
This demo is using the <div id="container"> as indicator for available space, which is 100% of the view port height. You will have to set a height or max-height to controll the max items per row. When you'd set max-height: 330; exactly 3 items would be in one row/column: Here is a demo showing this
body
{
margin:0;
}
#container
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
#container .box
{
width: 100px;
height: 100px;
margin: 5px;
background-color: silver;
flex: 0 0 auto;
}
HTML:
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
....
</div>
Information on Browser-Support: http://caniuse.com/#feat=flexbox (IE10+)
Nice article on flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/