Why flex elements are not going to next line when flex-basis is provided? [duplicate]

Question

I am trying to add width to the flex elements. I have provided the flex-basis:20%. How can I get the 6th and 7th element in next row/line?

Adding the scratch pad link below: scratchpad.io

#wrapper {
  display: flex;
}
.children {
  flex-basis: 20%;
  border: 1px solid;
}

<div id="wrapper">
  <div class="children">
    1
  </div>
  <div class="children">
    2
  </div>
  <div class="children">
    3
  </div>
  <div class="children">
    4
  </div>
  <div class="children">
    5
  </div>
  <br>
  <div class="children">
    6
  </div>
  <div class="children">
    7
  </div>


</div>

Thanks in advance.

Answer 1

Use the wrapping property - flex-wrap: wrap on your flexbox.

Even the horizontal margins affect wrapping - so set margin: 0 to body to reset the default browser margins and apply box-sizing: border-box to take care of the borders too.

See demo below:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-wrap: wrap;
}
.children {
  flex-basis: 20%;
  border: 1px solid;
}

<div id="wrapper">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children">7</div>
</div>