I have multiple columns set up in a similar way.
<div style="display: flex;flex-direction:column">
<main class="main-contents" role="main">TopHeader </main>
<div> content A</div>
<div> content B</div>
<div> content C</div>
<div> content D</div>
</div>
My goal is to make the main
section stick to the top of the page (similar to the YouTube player) and allow content A~D to be scrollable.
Does anyone have suggestions on how to achieve this effectively?
I'm hesitant about using flex
for this purpose,
but since I'm creating a responsive website, I want to keep the design as consistent as possible.