Forcing sidebar scroll using flexbox layout-CodePudding

I'm trying to build two column layout using flexbox css. Page should consist of header, sidebar, content area and footer.

One of the requirement is for a page to consume whole browser window space but not overflow it. Overflow could, however, happen in separate sections (like in this case - sidebar).

So I've decided to use flexbox for layout, however can't figure out how to make sidebar scrollable if it's content is bigger than place given to it by the layout engine.

I've built an example to better explain my problem. When there is not too much content (content size is smaller than the container), everything looks as expected:

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div >
      <div >
        <p>
        <b>Header</b>
        </p>
      </div>
      <div >
        <div >
            <p>
          <b>Sidebar</b>
            </p>
        </div>
        <div >
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div >
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

But if, for example, sidebar's content size is bigger than the sidebar itself, the footer gets pushed down and it causes the whole page to overflow the browser window size:

html,
    body {
      height: 100%;
      margin: 0;
    }

    .block {
        border: 1px solid grey;
    }

    .container {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .container > .header {
        flex: 0 1 auto;
        height: 65px;
    }

    .container > .content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
    }

    .container > .content > .page {
        flex: 1 1 auto;
    }

    .container > .content > .sidebar {
        flex: 0 1 auto;
        width: 250px;
        overflow: scroll;
    }

    .container > .footer {
        flex: 0 1 auto;
        height: 150px;
    }

<body>
    <div >
      <div >
        <p>
        <b>Header</b>
        </p>
      </div>
      <div >
        <div >
            <p>
          <b>Sidebar</b>
            </p>
            <div style="background-color: blue; height: 800px;"></div>
        </div>
        <div >
            <p>
          <b>Content</b>
            </p>
        </div>
      </div>
      <div >
        <p>
        <b>Footer</b>
        </p>
      </div>
    </div>
</body>

How I could fix this problem and force sidebar to add scrolling behaviour when content doesn't fit the container rather than expand the container?

CodePudding user response：

Add overflow-y: auto;, this will solve your problem.