Позиция фиксированная внизу: 0, перемещается в низ страницы, а не в низ экрана. ⇐ CSS

[Anonymous]

EDit
I have found out that the issue is related to my previous question here: Responsive difference between mobile view display vs browser view, even though same size

So it works as expected in regular desktop view. But when I switch on devtools and mobile view, Chrome acts buggy. Something about an overflow behavior, like I described on that question. Like I don't even know how responsiveness supposed to be implemented.
Original
I have something like this:

Hello World Fixed .main { height: 2000px; } header { position: relative; } nav { display: flex; flex-flow: row wrap; background: red; position: fixed; top: 0; left: 0; bottom: 0; } nav span { flex: 0 0 100%; } I've setup this on codepen, and the nav element with position fixed bottom: 0, extends up to the height of the screen area.

But in my real example the same setup, the nav element extends the the bottom of the page content which in this case '.main' which has a height of 2000px or something.

I can't figure out any other difference I have, maybe some media query issue I don't know.

So could you find a simple solution to reproduce my issue that somehow make it that this nav element extends to the bottom of the page, what could be causing that?


Источник: https://stackoverflow.com/questions/781 ... m-of-the-s