How to fix the flyout of a menu item in full height?

Question

css

In general, I tried to make up a menu that looked something like:

Well, it looks like it, but I think the technical implementation is through one place, I doubt the layout is correct.
Here's what happened:

But when changing the height, the menu itself does not press to the bottom, it looks dumb.

How to fix this, or how to make such a menu in general?
Link to codepen
I've been sitting for 4782734895723 days studying layout, but I can't learn how to layout normally, I don't know everything all the time. And the stopper even on such demos ((

Answer 1

What prevents the menu from setting

position: fixed\absolute; top: 0; bottom: 0; left: 0; width: 50px;

?

Answer 2

main-nav
min-height: 100%;
display:table;
height: 100vh;