title: Making flexbox column use the available width
body: <p>There is a container which has a flexible width and a number of fluid blocks inside it. My goal is to use all available space from left to right inside this container.</p>
  
  <p>Flexbox with flex-direction "column" suits nearly perfectly for my scenario. 
  I have one issue with it: <em>unless I specify the heights of the container, the inner blocks align themselves into 1  single column</em> (when I expect them to form several columns).</p>
  
  <p>Here is an example: <a href="http://jsfiddle.net/kopgjpsp/1/" rel="nofollow">http://jsfiddle.net/kopgjpsp/1/</a></p>
  
  <pre><code>css
  
      .box {
      display: flex;
      flex-flow: column wrap;
      -webkit-flex-flow: column wrap;
      justify-content: flex-start;
      max-width: 600px;
      /*max-height: 100px -- I am trying to avoid this*/
  }
  
  .box .fluid_block {
      max-width: 250px;
  }
  
  .fluid_block .title {
      padding-right: 30px;
      width:100px;
      display: inline-block;
      vertical-align: top;
  }
  
  .fluid_block .value {
      display: inline-block;
      max-width: 100px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div class="fluid_block"&gt;
          &lt;div class="title"&gt;Fluid block 1&lt;/div&gt; 
          &lt;div class="value"&gt;some content&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="fluid_block"&gt;
          &lt;div class="title"&gt;Fluid block 2&lt;/div&gt; 
          &lt;div class="value"&gt;some content some content some content&lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="fluid_block"&gt;
          &lt;div class="title"&gt;Fluid block 3&lt;/div&gt; 
          &lt;div class="value"&gt;some content some content some content some content&lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="fluid_block"&gt;
          &lt;div class="title"&gt;Fluid block 3&lt;/div&gt; 
          &lt;div class="value"&gt;some content some content some content some content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The solution I see at the moment is to calculate width with JS and set it, however, it is ugly and expensive, so I would like to avoid it if i can.</p>
  
  <p>I would appreciate any suggestion!</p>