Am working on a page layout with a fixed header area, and main content below it split between a sidebar/nav area and a main content area. So far all is good and everything lines up... if I add dummy content to force a scroll then my header stays at the top.
The idea is that the total content for both will be restricted to 80% or min 800px width ish, centered nicely in the window if it is bigger...
My problem is that for some reason when the window size is reduced below 800px width, although a scrollbar appears, the logo / sidebar area is shunted off screen to the left, outside what you can see with the scrollbar... in fact if shrunk enough even some of the main area which is scrollable is hidden off to the left.
...how do I stop this and force the content to remain on screen?
My code is:
body { padding: 0; margin: 0; font-family: sans-serif; display: flex; flex-direction: column;}#wrapHead { width: 100%; position: fixed; display: flex; justify-content: center; height: 80px; margin: 0; top: 0px; background-color: #333399; color: #ffffff;}.header { display: flex; width: 80%; min-width: 800px;}#wrapMain { width: 100%; /* position: fixed; */ display: flex; justify-content: center; height: 100%; margin: 0; margin-top: 80px;}.main { display: flex; width: 80%; min-width: 800px;}.sideCol { width: 150px; min-width: 150px; background-color: #6666cc;}.mainCol { width: 100%; min-width: 650px; background-color: #9999ee;}<div id="wrapHead"><div class="header"><div class="sideCol"> [LOGO]</div><div class="mainCol"> header/title --> [user/login]</div></div></div><div id="wrapMain"><div class="main"><div class="sideCol"> side nav</div><div class="mainCol"> main content</div></div></div>