title: How to "clear" flex box while overlapping container
body: <p>I have 3 items in a flex box container (<code>.flex-container</code>) which overlap their parent container (<code>.wrapper</code>) to give a more dimensional view. </p>
  
  <p><a href="https://i.stack.imgur.com/CRUds.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CRUds.jpg" alt="enter image description here"></a></p>
  
  <p><strong>The problem</strong></p>
  
  <p>How can I create a situation where the <code>.grid-container .content</code> section below the <code>.wrapper</code> "understands" that it has to drop, so that it does not overlap the flex items?</p>
  
  <p>When I would use float for example to align the <code>.flex-item</code> elements, the elements after the <code>.wrapper</code> would neatly shift down so that they do not appear over the <code>.flex-item</code> elements (like <a href="https://codepen.io/robbertvermeulen/pen/NZEGwQ" rel="nofollow noreferrer">https://codepen.io/robbertvermeulen/pen/NZEGwQ</a>). How can I achieve this with flex box?</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>.wrapper {
    height: 70px;
    background-color: #000;
  }
  
  .grid-container {
    width: 50%;
    margin: 0 auto;
  }
  
  .flex-container {
    display: flex;
  }
  
  .flex-item {
    width: 33.33%;
    min-height: 140px;
    background-color: red;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="grid-container"&gt;
      &lt;div class="flex-container"&gt;
        &lt;div class="flex-item"&gt;Flex item 1&lt;/div&gt;
        &lt;div class="flex-item"&gt;Flex item 2&lt;/div&gt;
        &lt;div class="flex-item"&gt;Flex item 3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div class="grid-container"&gt;
    &lt;div class="content"&gt;
      &lt;p&gt;Suspendisse potenti. Quisque tincidunt pellentesque blandit. Nulla sed lacinia mauris. Proin luctus, nulla a tempus scelerisque, diam turpis rhoncus diam, sit amet blandit nibh tortor eget velit. Cras eu viverra augue. Duis ut neque justo. Quisque viverra lacinia justo non feugiat. Mauris tincidunt maximus enim, vitae faucibus odio auctor nec. Quisque nisi erat, fermentum quis nisl et, dapibus tristique odio. Donec nec pulvinar ante. Etiam bibendum lacus nec justo volutpat aliquam. Fusce in lacus et augue vehicula semper nec sit amet massa. Fusce vehicula ullamcorper orci, quis vestibulum justo cursus eu. Etiam quis posuere turpis. Sed maximus odio quis neque posuere, nec pulvinar nibh mollis.
  &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>