title: flex-direction column not responsive
body: <p>I am facing a problem with <code>flex-direction: column</code> on responsive mode. When I write <code>flex-direction: column</code>  to <code>.container</code> its not wrapping to responsive like <code>flex-direction: row</code>, it's going outside of the layout. How to fix that?</p>
  
  <pre><code>   &lt;div class="content"&gt;
       &lt;div class="container"&gt;
  
         &lt;div class="box"&gt;First Name Man&lt;/div&gt;
                &lt;div class="box"&gt;First Name Man&lt;/div&gt;
         &lt;div class="box"&gt;First Name Man&lt;/div&gt;
         &lt;div class="box"&gt;First Name Man&lt;/div&gt;
  
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <pre><code>.content {
    width: 100%;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: whitesmoke;
  }
  
  
  .container {
    width: 100%;
    min-height: 500px;
     display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
  
  }
  
  .box {
    width:700px;
    margin: 10px;
    color:white;
    min-height: 70px;
  
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
    justify-content: space-around;
    background-color: indigo;
    flex-direction: column;
    flex-wrap: wrap;
  }
  </code></pre>