title: CSS: Flex Children's Width and Floating
body: <p>I want to achieve positioning like this (these are buttons but it doesn't matter):</p>
  
  <pre><code>|-------|-------|-------|-------|
  |       |       | small |       |
  |       |       |-------|       |
  |  big  |  big  | small |  big  |
  |-------|-------|-------|-------|
  </code></pre>
  
  <p>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.</p>
  
  <p>After short research I've found <code>display: flex</code>. 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.</p>
  
  <p>Note: I don't want it to occupy 100% width - it should take only as much space as it needs. <code>float: left</code> on parent seems to be perfect.</p>
  
  <p>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 <strong>BUT</strong> parent is bigger!</p>
  
  <p>Here is code I got (and fiddle here, which shows those two cases: <a href="http://jsfiddle.net/h7SK7/" rel="nofollow">http://jsfiddle.net/h7SK7/</a>):</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;button&gt;Lorem&lt;/button&gt;
      &lt;button class="small"&gt;Dolor&lt;/button&gt;
      &lt;button class="small"&gt;Sit&lt;/button&gt;
     &lt;/div&gt;
  
  div.container {
      height:50px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      float:left;
  }
  
  button {   
      height:50px;   
  }
  
  button.small {
      height:20px;
  }
  </code></pre>
  
  <p>Can anyone help me?</p>