CSS: Flex Children's Width and Floating - html

Question

I want to achieve positioning like this (these are buttons but it doesn't matter):
|-------|-------|-------|-------|
| | | small | |
| | |-------| |
| big | big | small | big |
|-------|-------|-------|-------|
So I would call it positioning top to bottom, left to right - browser should put element below previous one if there is enough place, otherwise - put next to it. I don't know how many elements there will be, nor their width, etc. etc. - it has to be very flexible.
After short research I've found display: flex. It looks very promising (I don't need compatibility with different browsers - my plan is to do local app using html) but there is one problem.
Note: I don't want it to occupy 100% width - it should take only as much space as it needs. float: left on parent seems to be perfect.
In simple case: big button, big button, small button, big button - it works perfect. The problem appears when I add one more small button - it is displayed properly - under previous one BUT parent is bigger!
Here is code I got (and fiddle here, which shows those two cases: http://jsfiddle.net/h7SK7/):
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
div.container {
height:50px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
float:left;
}
button {
height:50px;
}
button.small {
height:20px;
}
Can anyone help me?

Answer 1

Try putting small buttons in a div. like this JSFiddle
<div class="container">
<button>Lorem</button>
<div class="box">
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
</div>
.box{
width:70px;
}

Answer 2

Flexbox isn't about packing children as tight as possible. It is just for stacking children (flex-items) either horizontally or vertically. To get the desired layout, you must use multiple nested flexboxes. From CSS Flexible Box Layout Module
Abstract
...
Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
So, to get your desired layout, you must wrap the two small buttons into a flexbox and change the container to flex-direction: row
<div class="container">
<button>Lorem</button>
<div class="small">
<button>Dolor</button>
<button>Sit</button>
</div>
</div>
div.container {
display: flex;
flex-direction: row;
}
div.small {
display: flex;
flex-direction: column;
}
div.small button {
height:20px;
}
See modified JSFiddle
Update:
Maybe, CSS multi-column layouts achieve the needed layout. At least with your buttons, it seems to work
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
<button>Amet</button>
</div>
.container {
-moz-column-width: 50px;
-webkit-column-width: 50px;
column-width: 50px;
}
button {
width: 60px;
height: 50px;
}
button.small {
height: 20px;
}
JSFiddle