title: How to remove the gaps within flex items?
body: <p>There is a huge gap appearing in the <code>div</code> with the text in increasing with <code>display:flex</code></p>
  
  <p><a href="https://i.stack.imgur.com/Wjjzf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wjjzf.png" alt="enter image description here"></a></p>
  
  <p>Adding extra <code>div</code> wrap may not be a solution which may effect to mobile version. <strong>Mobile view should be looks like this </strong></p>
  
  <p><a href="https://i.stack.imgur.com/XzSE4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XzSE4.png" alt="enter image description here"></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>p {
    margin: 10px;
  }
  
  body {
    display: flex;
    flex-wrap: wrap;
    // flex-direction: column;
  }
  
  .my-wrap {
    width: 90%;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border: 1px solid #eee;
    color: #fff;
  }
  
  .wrap-one,
  .wrap-two {
    width: 75%;
  }
  
  .wrap-one {
    background-color: tomato;
    flex: 1;
  }
  
  .wrap-two {
    background-color: deepskyblue;
  }
  
  .wrap-three {
    background-color: greenyellow;
    flex-basis: 100%;
    width: 25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="my-wrap"&gt;
    &lt;div class="wrap-one"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="wrap-two"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="wrap-three"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>