title: How to Get Float Behavior Inside Flex Element?
body: <p>Looking to have one large item on the left and a lot of small items on the right.  If the browser window is big enough, I'd like the small items to "float" in a columnar manner such that they don't exceed the height of the large item.  However, when the browser shrinks, I'd like the small items to wrap down below the large one in a single row.</p>
  
  <p>Here's a codepen to demonstrate: <a href="https://codepen.io/anon/pen/WXQdEN" rel="nofollow noreferrer">https://codepen.io/anon/pen/WXQdEN</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.container {
    display: flex;
    flex-wrap: wrap;
  }
  
  div.right-variable {
    max-height: 320px;
    align-items: center;
  }
  
  div.test-700 {
    width: 700px;
    height: 320px;
    background: green;
    color: #ffffff;
    font-size: 40px;
  }
  
  div.test-100 {
    width: 100px;
    height: 100px;
    background: red;
    outline: 1px solid black;
    margin: 2px;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="test-700"&gt;Example Table&lt;/td&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
        &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="container"&gt;
    &lt;div class="left-fixed"&gt;
      &lt;div class="test-700"&gt;Non-Working Flex&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right-variable"&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
      &lt;div class="test-100"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The table shows the desired behavior of the red boxes at large resolutions.  As the browser shrinks, the boxes float around to fill the space.  </p>
  
  <p>But when the browser gets too small to contain them, I want the flex behavior where the red boxes wrap down under the green one.  I understand that this doesn't work because I can't float the items within the flex, but I don't understand how to achieve a similar behavior without float.  I'd like to achieve this using flex and CSS only.  Is that possible?</p>
  
  <p>Thank you for any assistance.</p>