Why aren't absolutely positioned blocks stretched to the full width of the document?

Question

css

Good evening, colleagues!
I have two blocks on the site with absolute position, there are lists of articles and a button at the bottom, they go out when the button is clicked on top of the content. Everything is laid out on flexbox. But there is a bug, if there is a lot of content, when scrolling, these two floating blocks do not stretch to the entire document, but occupy only the height of the viewport.
Demo codepen.io/anon/pen/ojrJpx
Thanks in advance for your help

Answer 1

In your case, you need to add position: relative; for the body tag, because your positioning should be relative to the body:
body {
display: flex;
min-height: 100vh;
background color: pink position: relative; }

Answer 2

Because absolute depends on the viewport, as an option, you can make position: fixedor stretch the block using JS

Answer 3

A block with absolute positioning is positioned relative to the nearest parent with relative positioning.
Wrap this whole crap in a block with position:relative

<div style="position:relative">
<nav>
  <h5>Nav</h5>
  <button>Exit</button>
</nav>
<aside> 
  <h5>Sidebar</h5>
  <button>Exit</button>
</aside>
<main>...</main></div>

Answer 4

why ask twice?