title: Force flexbox element not to take all vertical space
body: <p>TL;DR: flex element with <code>flex-direction: row</code> takes all vertical space and prevents the scrollbar in its child.</p>
  
  <hr>
  
  <p>The <a href="https://jsfiddle.net/cmrocLv3/1/" rel="nofollow noreferrer">first fiddle</a> shows what kind of UI I'd <strong>like to achieve</strong>: it's a page that stretches to the whole screen, both horizontally and vertically. It contains a header and a main <code>&lt;div&gt;</code>, which is a scrollable list of items. The container is thus a <code>column</code> flexbox. Note that it's width and height are just fine.</p>
  
  <p>Now I want to add a sidebar to the main content, and flexbox seems to be perfect for this as well. I simply add one more <code>&lt;div id='main'&gt;</code> with <code>flex-direction: row</code>: see the <a href="https://jsfiddle.net/ag7sfefe/2/" rel="nofollow noreferrer">second fiddle</a>. The sidebar is shown fine, but here is a <strong>problem</strong>. The new <code>&lt;div id='main'&gt;</code> takes all vertical space, as a result, the items list never gets a scrollbar.</p>
  
  <p>I have tried to limit the height <code>&lt;div id='main'&gt;</code> and it seems to work. But it's pretty inconvenient in terms of code, because the header is a separate component, so in general its height is <em>unknown</em> to the main component and I have calculate it before setting <code>height: calc(100vh - ...)</code>.</p>
  
  <p>Is there a pure CSS way to tell a flexbox container <em>not</em> to grow vertically? Or should I go back to good old table html?</p>