Flexbox: нежелательный разрыв строки

Question

Там должно быть 3 DIV подряд.По какой-то причине после второго DIV возникает новая строка.Там должно быть достаточно места, так как каждый DIV имеет ширину только 33%.Так почему же происходит разрыв строки?

Результат должен выглядеть следующим образом:

Вот мой текущий код.

* {
  box-sizing:border-box;
}

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

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis:calc(100%/3);
}

<div class="flex">


    <div class="third">third</div>
    <div class="third">third</div>
    <div class="third">third</div>

    <div class="third">third</div>
    <div class="third">third</div>

 
</div>

Answer 1

Необходимо учитывать маржу при расчете flex-basis:

* {
  box-sizing:border-box;
}

.flex {
  display: flex;
  flex-wrap:wrap;
  border:1px solid;
}

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis:calc(100%/3 - 10px);
}

<div class="flex">


    <div class="third">third</div>
    <div class="third">third</div>
    <div class="third">third</div>

    <div class="third">third</div>
    <div class="third">third</div>

 
</div>