Layout with two columns is not displaying properly
Hello there, I have a problem with my rendered page. It contains 2 columns and html look like that:
<div class="page_layout">
<div class="sidebar"></div>
<div class="main-content"></div>
</div>
Everything works fine if main-content has more text than sidebar but if sidebar have more content and need to be moved to next page my main-content div shifts to next page or even to next page if sidebar takes place of 2 pages. I created image how it look like:
I tried using display grid on .page_layout, display:flex and event adding each column position:absolute with proper width and nothng helped. Tried to add more content to sidebar and no matter how much content is in sidebar main-content will start at the end of sidebar height.
Any ideas how to fix it?