flexbox - ReactCSS Layout: make sidebar scrollable - Stack Overflow

I am quite new to web app development (just hobby). I have the following layout based on flexbox:

• Header row
• Main part consisting of main div and side bar
• Footer row

When the screen is wide enough (>600px), sidebar is shown on the side. The content must be scrollable, so that the whole layout fit to the viewport. How to get it? I probably need to fix the height somehow and add overflow-y: auto. But how to fix height of the sidebar the way the app always fit to viewport?

There is a Codesandbox: (please open the result in a separate windows to see result on full screen)

The relevant html layout is:

    <div id="app_container">
      <div id="headerRow">
        <div id="headerTitleDiv">
          <h2>PAGE TITLE</h2>
        </div>
        <div id="headerInfoDiv">
          <h2>..info..</h2>
        </div>
      </div>

      <div id="mainRow">
        <div id="reactflowDiv">MAIN CONTENT</div>
        <div id="sidebarDiv">
          side row 1<br />
          side row 2<br />
          side row 3<br />
          side row 4<br />
          ...
          <br />
          side row 33
          <br />
        </div>
      </div>
      <div id="footerRow">Footer Row Here</div>
    </div>

and the css file:

html,
body {
  background: #fff;
  padding: 0;
  margin: 0;
}

#app_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#headerRow {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#headerTitleDiv {
  flex: 1 1 auto;
  text-align: center;
}

#headerInfoDiv {
  flex: 0 0 auto;
  margin: 8;
}

#mainRow {
  flex: 1 0 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#reactflowDiv {
  flex: 3 0 300px;
  min-height: 500px;
}

#sidebarDiv {
  min-width: 300px;
}

@media only screen and (max-width: 601px) {
  #reactflowDiv {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  #sidebarDiv {
    flex: 1 0 auto;
  }
}

@media only screen and (min-width: 602px) {
  #reactflowDiv {
    border-right-style: solid;
    border-right-width: 1px;
  }
  #sidebarDiv {
    flex: 0 0 300px;
  }
}

#footerRow {
  border-top-style: solid;
  border-top-width: 1px;
}

On small screen the sidebar should be on bottom, this works basically.

I tried to put overflow-y: auto; to #sidebarDiv in css, but it does not help.

I am quite new to web app development (just hobby). I have the following layout based on flexbox:

• Header row
• Main part consisting of main div and side bar
• Footer row

When the screen is wide enough (>600px), sidebar is shown on the side. The content must be scrollable, so that the whole layout fit to the viewport. How to get it? I probably need to fix the height somehow and add overflow-y: auto. But how to fix height of the sidebar the way the app always fit to viewport?

There is a Codesandbox: https://codesandbox.io/p/sandbox/cpm2d2 (please open the result in a separate windows to see result on full screen)

The relevant html layout is:

    <div id="app_container">
      <div id="headerRow">
        <div id="headerTitleDiv">
          <h2>PAGE TITLE</h2>
        </div>
        <div id="headerInfoDiv">
          <h2>..info..</h2>
        </div>
      </div>

      <div id="mainRow">
        <div id="reactflowDiv">MAIN CONTENT</div>
        <div id="sidebarDiv">
          side row 1<br />
          side row 2<br />
          side row 3<br />
          side row 4<br />
          ...
          <br />
          side row 33
          <br />
        </div>
      </div>
      <div id="footerRow">Footer Row Here</div>
    </div>

and the css file:

html,
body {
  background: #fff;
  padding: 0;
  margin: 0;
}

#app_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#headerRow {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#headerTitleDiv {
  flex: 1 1 auto;
  text-align: center;
}

#headerInfoDiv {
  flex: 0 0 auto;
  margin: 8;
}

#mainRow {
  flex: 1 0 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#reactflowDiv {
  flex: 3 0 300px;
  min-height: 500px;
}

#sidebarDiv {
  min-width: 300px;
}

@media only screen and (max-width: 601px) {
  #reactflowDiv {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  #sidebarDiv {
    flex: 1 0 auto;
  }
}

@media only screen and (min-width: 602px) {
  #reactflowDiv {
    border-right-style: solid;
    border-right-width: 1px;
  }
  #sidebarDiv {
    flex: 0 0 300px;
  }
}

#footerRow {
  border-top-style: solid;
  border-top-width: 1px;
}

On small screen the sidebar should be on bottom, this works basically.

I tried to put overflow-y: auto; to #sidebarDiv in css, but it does not help.

• css
• flexbox
• scroll

Share Follow asked Mar 8 at 21:06 WladiWladi 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Firstly, to prevent #mainRow from exceeding the height, you need to add min-height: 0.

Next, depends on where you want to have the scrollbar, add the styles as below:

Case 1: If you want the main content and the sidebar to share the same scrollbar, then add this style to #mainRow:

overflow-y: auto;

Case 2: If you want them to have separate scrollbars, then add these styles to each of them:

overflow-y: auto;
max-height: 100%;

Also need to remove min-height: 500px in #reactflowDiv

html,
body {
  background: #fff;
  padding: 0;
  margin: 0;
}

#app_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#headerRow {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#headerTitleDiv {
  flex: 1 1 auto;
  text-align: center;
}

#headerInfoDiv {
  flex: 0 0 auto;
  margin: 8;
}

#mainRow {
  flex: 1 0 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* Changes */
  min-height: 0;
  /* Changes */
}

#reactflowDiv {
  flex: 3 0 300px;
  /* Changes */
  max-height: 100%;
  overflow-y: auto;
  /* Changes */
}

#sidebarDiv {
  min-width: 300px;
  /* Changes */
  max-height: 100%;
  overflow-y: auto;
  /* Changes */
}

@media only screen and (max-width: 601px) {
  #reactflowDiv {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }

  #sidebarDiv {
    flex: 1 0 auto;
  }
}

@media only screen and (min-width: 602px) {
  #reactflowDiv {
    border-right-style: solid;
    border-right-width: 1px;
  }

  #sidebarDiv {
    flex: 0 0 300px;
  }
}

#footerRow {
  border-top-style: solid;
  border-top-width: 1px;
}

<div id="app_container">
  <div id="headerRow">
    <div id="headerTitleDiv">
      <h2>PAGE TITLE</h2>
    </div>
    <div id="headerInfoDiv">
      <h2>..info..</h2>
    </div>
  </div>

  <div id="mainRow">
    <div id="reactflowDiv">MAIN CONTENT</div>
    <div id="sidebarDiv">
      side row 1<br />
          side row 2<br />
          side row 3<br />
          side row 4<br />
          side row 5<br />
          side row 6<br />
          side row 7<br />
          side row 8<br />
          side row 9<br />
          side row 10
      <br />
          side row 11
      <br />
          side row 12
      <br />
          side row 13
      <br />
          side row 14
      <br />
          side row 15
      <br />
          side row 16
      <br />
          side row 17
      <br />
          side row 18
      <br />
          side row 19
      <br />
          side row 20
      <br />
          side row 21
      <br />
          side row 22
      <br />
          side row 23
      <br />
          side row 24
      <br />
          side row 25
      <br />
          side row 26
      <br />
          side row 27
      <br />
          side row 28
      <br />
          side row 29
      <br />
          side row 30
      <br />
          side row 31
      <br />
          side row 32
      <br />
          side row 33
      <br />
    </div>
  </div>
  <div id="footerRow">Footer Row Here</div>
</div>