Фиксация aside при прокрутке

Не могу ни как сделать фиксацию aside блоков при прокрутке. У меня header фиксированный, main имеет фиксированную ширину (адаптивно), поэтому использование fixed для aside не вариант. Как решить данную проблему, а так же что лучше использовать на ваш взгляд grid или же flex и почему?

<header>
    <div class="container">
        <div class="container-left">
            шапка лево
        </div>
        <div class="container-center">
            шапка центер
        </div>
        <div class="container-right">
            шапка право
        </div>
    </div>
</header>

<main>
    <div class="container">
        <aside class="container-left">
            main лево
        </aside>
        <div class="container-center">
            main центр
        </div>
        <aside class="container-right">
            main право
        </aside>
    </div>
</main>

Cсылка на код codepen