In the following example I am using percent values in the `flex-basis` property. What makes the browser decide when to start breaking the row?

```css
section {
  display: flex;
  flex-wrap: wrap;
}

div {
  border: 1px solid;
  padding: 1rem;
  flex: 1 0 10%;
}

body {
  margin: 100px;
}

* {
  box-sizing: border-box;
}
```

```html
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>
```