title: Shrink to fit content in flexbox, or flex-basis: content workaround?
body: <p>I have a webapp with which I'm using flexbox for layout.</p>
  
  <p>I'm trying to both fill the screen (it's an app, not a document), and as far as possible to not specify any fixed widths or heights as the content could be all sorts of things (Full fluid layout! The dream!)</p>
  
  <p>So I need fluid height, full width headers and footers, and then a main panel in the middle filling the remaining vertical space, divided into columns, each of which scrolls when too high, and where the width of each non-primary column should shrink to fit its content, and a primary column which uses up the remaining space.</p>
  
  <p>I am so close, but have had to resort to explicitly sizing the non-main columns - I believe that <code>flex-basis: content;</code> is supposed to do this but isn't supported by browsers yet.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/4ovu226m/" rel="noreferrer"><strong>minimal demo</strong></a> showing fixed size columns:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var list = document.querySelector('ul')
  
  for (var i = 0; i &lt; 100; i++) {
    var li = document.createElement('li')
    li.textContent = i
    list.appendChild(li)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
  main &gt; section {
    overflow-y: auto;
    flex-basis: 10em;
    /* Would be better if it were fluid width/shrink to fit, unsupported: */
    /* flex-basis: content; */
  }
  main &gt; section:last-child {
    display: flex;
    flex: auto;
    flex-direction: column;
  }
  main &gt; section:last-child &gt; textarea {
    flex: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;main&gt;
    &lt;section&gt;
      &lt;h1&gt;One&lt;/h1&gt;
      &lt;ul&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  
    &lt;section&gt;
      &lt;h1&gt;Two&lt;/h1&gt;
    &lt;/section&gt;
  
    &lt;section&gt;
      &lt;header&gt;
        &lt;h1&gt;Three&lt;/h1&gt;
      &lt;/header&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/section&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
    &lt;p&gt;Footer&lt;/p&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which looks like this - I want columns <strong>One</strong> and <strong>Two</strong> to shrink/grow to fit rather than being fixed:</p>
  
  <p><a href="https://i.stack.imgur.com/nqdMO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nqdMO.png" alt="enter image description here"></a></p>
  
  <p>My question is, is there a CSS-only workaround for <code>flex-basis: content</code>, or an alternative way to realise this goal? </p>
  
  <p>I can possibly live with fixing the column sizes as above, or using javascript, but I HAVE A DREAM DAMN IT.</p>