Прибивание сайдбаров к верху и низу через flexbox

http://toster.ru/q/139927

by vovkasolovev

HTML

<div class="parent">
<article class="blue">
МАЛО
</article>
<aside>
<div class="gray">GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY</div>
<div class="red">RED RED RED RED RED RED RED RED RED RED RED RED</div>
</aside>
</div>


<div class="parent">
<article class="blue">
МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО МНОГО
</article>
<aside>
<div class="gray">GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY GRAY</div>
<div class="red">RED RED RED RED RED RED RED RED RED RED RED RED</div>
</aside>
</div>

CSS

.parent{background: lightgray; display: flex;}
article{width: 70%; display: flex;}
.blue{background: blue; align-self: flex-start}
aside{width: 30%; display: flex; flex-direction: column; justify-content: space-between; border:3px dotted white;}
.gray{background: gray;}
.red{background: red; align-self: flex-end}