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>

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>

• html
• css
• flexbox

• 1 Welcome to Stack overflow! I would look into using media queries – Austin Duling Commented Feb 5 at 20:15

2 Answers 2

With @media added to CSS:

@media (max-width: 817px) {
  .header {
    width: 100%;
    min-width:auto;
  }
  .main {
    width: 100%;
    min-width:auto;
  }
  .mainCol { min-width: auto; }
}

This resets min widths. I also added:

@media (max-width: 649px) {
  #sideNav { display: none;}
}

to remove the sidebar if the screen is very small.

• The main content is scrolling because you commented the position: fixed section. Uncomment it and maybe comment the height: 100% rule.
• The minimum width is 800px because you've set min-width: 150px; for .side-cols elements and min-width: 650px; for .mainCol elements ; consider using relative units or percent-based units to adapt to the context.

Use horizontal elements which have width-relative fixed spacing right and left, a side column with a low width-relative value and a main column which expands with flex-grow:

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #333399;
}

#body-background {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;

  margin: 0px;
  padding: 0px;

  display: flex;
  flex-direction: column;
}

#header-background {
  height: 80px;
  background: #333399;
}

#main-background {
  flex-grow: 1; /* to take all the space left */
  background: #c3c3c3;
}

#main-container {
  position: fixed;
  top: 0px;
  left: 10vw;
  right: 10vw;
  bottom: 0px;
  width: 80%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.container-section {
  display: flex;
  flex-direction: row;
}

#header {
  height: 80px;
}

#main {
/*  flex-grow: 1;*/ /* Would take the space left on the page */
}

.sideCol {
  width: 10vw;
  background: #6666cc;
}

.mainCol {
  flex-grow: 1;
  background: #9999ee;
}

<div id="body-background">
  <div id="header-background">
  </div>
  <div id="main-background">
  </div>
</div>

<div id="main-container">
  <div id="header" class="container-section">

    <div class="sideCol">
      [LOGO]
    </div>
    <div class="mainCol">
      header/title  -->  [user/login]
    </div>

  </div>

  <div id="main" class="container-section">

    <div class="sideCol">
      side nav
    </div>

    <div class="mainCol">
      main content
    </div>

  </div>
</div>

I have inserted one element for the background, and another for the content.