Bug when designing a site on flexbox, how to solve?

Question

css

Good evening!
The problem is the following, if you turn on the devtool in chrome or pull the plan down on the codepen so that the sidebar content does not fit into the viewport, then a bug appears, blocks with absolute positioning do not go where, and main does not take up space. How to decide?
codepen.io/anon/pen/ojrJpx

Thanks in advance!

Answer 1

Absolutely positioned elements fall out of the general flow, in your case you need to change the positioning in the nav tag to relative:
nav { position: relative; . . . }