How to remove the gaps within flex items?

Question

There is a huge gap appearing in the div with the text in increasing with display:flex

Adding extra div wrap may not be a solution which may effect to mobile version. Mobile view should be looks like this 👇

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%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>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?</p>
  </div>
  <div class="wrap-two">
    <p>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.</p>
  </div>
  <div class="wrap-three">
    <p>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.</p>
  </div>
</div>

Answer 1

First, you're getting abnormal behavior because you've specified flex-basis: 100% on the green item (.wrap-three), without specifying a height on the parent.

In CSS, for percentage heights to work properly across browsers, you should always specify the parent's height.

Add this to your code:

html, body, .my-wrap { height: 100%; }

html,
body,
.my-wrap {
  height: 100%;
}

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.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%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>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?</p>
  </div>
  <div class="wrap-two">
    <p>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.</p>
  </div>
  <div class="wrap-three">
    <p>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.</p>
  </div>
</div>

Second, since you haven't specified a height on the flex container, browsers are free to interpret the height at their discretion.

For a more stable layout, try this (for example): .my-wrap { height: 300px }

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  height: 300px;
  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%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>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?</p>
  </div>
  <div class="wrap-two">
    <p>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.</p>
  </div>
  <div class="wrap-three">
    <p>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.</p>
  </div>
</div>

More information:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent