How the flex box converts from 3 column in to 2 column? what is the logic behind

Question

.box {
  display: flex;
  flex-wrap: wrap;
}
.box > * {
  flex: 1 0 33%;
  border: 1px solid red;
}

  <div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

The above flex box converts from 3 column in to 2 column on shrink of the web page. what is the logic behind? when i set width as 33% it should keep that percent right? how it's convert in to 2 column on page shrink? not able to understand.

Live demo