title: Using flexbox to wrap all or none
body: <p>Is there a way to achieve the following?</p>
  
  <p>Starting with three items on a single row, if the total width exceeds the flex parent's width, snap to a column orientation.</p>
  
  <p>The major constraint on a solution for my particular use case is that I am unable to use media queries to swap the flex-direction although this would probably be the easiest thing to do. </p>
  
  <p>Media queries aren't a viable solution this case because the component is stand-alone and can be placed in a variety of locations which will dictate the container width independently of the browser width. If there is some magic whereby media queries can be based on a parent container rather than the page, that would be awesome, but I haven't seen anything like that so far.</p>
  
  <p>In this <a href="https://jsfiddle.net/4pLhudo8/1/" rel="noreferrer">fiddle</a> the second div with longer names needs to be wrapped into three lines, but the closest I can get is two lines. </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;span class="item"&gt;Dan Martinez&amp;nbsp;&lt;/span&gt;
      &lt;span class="item"&gt;@DanMartinez101&amp;nbsp;&lt;/span&gt;
      &lt;span class="item"&gt;an hour ago&amp;nbsp;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="container"&gt;
      &lt;span class="item"&gt;Someone with a really long name&amp;nbsp;&lt;/span&gt;
      &lt;span class="item"&gt;@AndAReallyLongHandle&amp;nbsp;&lt;/span&gt;
      &lt;span class="item"&gt;about three million years ago&amp;nbsp;&lt;/span&gt;
  &lt;/div&gt;
  
  .container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      background-color: 'red';
  }
  
  .item {
      white-space: nowrap;
      flex: 0 1 auto;
  }
  </code></pre>