Por que, neste exemplo, é o.main elemento (azul) que divide o espaço apenas com.aside-1 (amarelo) e.aside-2 (rosa) e não com todos os elementos?

Temos um wrapper que coloca todos os elementos ocupando uma linha.

No.main nós dizemosflex: 3 0px, que eu acho que diz, esse elemento será 3x maior que os outros quatro elementos e ocupará 3 / (3 + 1 + 1 + 1 + 1).

No entanto, notei que, com umnowrap invólucro o menor item é.main.

E comwrap, ele divide com os dois elementos mais próximos.

Não consigo entender isso.

.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>