Используя Flexbox, элементы растягиваются, чтобы заполнить пробел между строками [дубликаты]

На этот вопрос уже есть ответ:

трока @Flexbox: Как растянуть детей, чтобы заполнить поперечную ось? 2 ответа

Я чувствую себя немного глупо, спрашивая об этом, но я как-то исчерпал свои знания о Flexbox, так что я надеюсь, что кто-то еще может прийти и помочь мне здесь.

Моя общая цель - просто растянуть два элемента в среднем ряду, чтобы заполнить пространство между заголовком и элементами, и я искал вокруг и, честно говоря, не могу понять, что мне делать. Я раздвоил код от CSS Tricks Guide, тот, что в самом низу, и я сделал некоторые изменения. Код, который у меня сейчас есть открыть его в полноэкранном режиме, чтобы сделать его более понятным):

body,
html {
  height: 100%;
}
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  height: 100%;
  font-weight: bold;
  text-align: center;
}
.wrapper > * {
  padding: 10px;
  flex: 1 1 100%;
}
.header {
  background: tomato;
  height: 50px;
  flex: 1 1 100%;
}
.footer {
  background: lightgreen;
  height: 50px;
}
.main {
  text-align: left;
  align-self: stretch;
  background: deepskyblue;
}
.aside-1 {
  background: gold;
}
.aside-2 {
  background: hotpink;
}
@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}
<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>

  <footer class="footer">Footer</footer>
</div>

Возможно ли это сделать во flexbo без изменения HTML или я должен просто искать другой способ достижения этой цели?

Ответы на вопрос(4)

Ваш ответ на вопрос