title: Make flex-direction switch to column if there's not enough space in a row
body: <p>In the example below, what I want is to have <code>.inner-flexbox</code> have <code>flex-direction: row;</code> when its child elements can fit on a single row, but switch to <code>flex-direction: column;</code> when they cannot. I don't think media queries are what I want here because I would be basing them on whether the viewport width is greater than or less than the width of all the <code>&lt;div&gt;</code>s in <code>.inner-flexbox</code> in a row plus the width of the <code>&lt;aside&gt;</code>. Basically, I don't want the items inside <code>.inner-flexbox</code> wrapping—I want them either all in one row, or all in one column.</p>
  
  <p>(distilled example): I have a flexbox that contains two items. One is a "normal" element, the other is another flexbox.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer-wrapper
  {
      display:flex;
      width: 100%;
      height: auto;
      background-color: gray;
      flex-wrap: nowrap;
  }
  
  .inner-flexbox
  {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
  }
  
  .inner-flexbox &gt; div
  {
      width: 10rem;
      height: 10rem;
      background-color: salmon;
      margin: 10px;
  }
  
  aside
  {
      background-color: blue;
      width: 15rem;
      height: 15rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-wrapper"&gt;
    &lt;div class="inner-flexbox"&gt;
      &lt;div&gt;Block 1&lt;/div&gt;
      &lt;div&gt;Block 2&lt;/div&gt;
      &lt;div&gt;Block 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;aside&gt;&lt;!-- Other content here --&gt;&lt;/aside&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>