In my page layout with a fixed header area and main content (split between a sidebar and main content area) everything lines up and if I add dummy content to force a scroll then my header stays at the top. The content will be restricted to 80% or min 800px width centered in the window if it is bigger.
When window size is reduced below 800px width, although a scrollbar appears, the logo/sidebar area is off screen to the left. If shrunk enough even some of the main area which is scrollable is hidden off to the left. How do I force the content to remain on screen?
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>