¿Por qué, en este ejemplo, es el.main elemento (azul) que divide el espacio solo con.aside-1 (amarillo) y.aside-2 (rosa), y no con todos los elementos?

Tenemos un contenedor que pone todos los elementos en una línea.

En.main decimosflex: 3 0px, que creo que dice, este elemento será 3 veces más grande que los otros cuatro elementos y ocupará 3 / (3 + 1 + 1 + 1 + 1).

Sin embargo, he notado que con unnowrap envoltorio el artículo más pequeño es.main.

Y conwrap, se divide con los dos elementos más cercanos.

No puedo entender esto.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper>* {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 50vh;
  flex: 3 0px;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

.aside {
  flex: 1 auto;
}

.aside-1 {
  order: 1;
}

.main {
  order: 2;
}

.aside-2 {
  order: 3;
}

.footer {
  order: 4;
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>