How to keep the left and right flex elements (sidebars) fixed while the middle element scrolls, with the scroll bar on the right?

Question

I am making a page that has three elements: A left sidebar, a right sidebar, and a main feed (600px wide) down the middle which scrolls. The scroll bar must be on the right-hand side of the screen like a normal webpage and the user must be able to scroll by moving the mouse wheel at any point on the page.

So far I have a page very similar to what is going on in this codepen that I found here on StackOverflow:

https://codepen.io/Sphinxxxx/pen/WjwbEO

That Pen has a fixed sidebar on the left using flexbox. I want another sidebar on the right, almost exactly like this: https://codepen.io/rolandmackintosh/pen/bGedMoX

I accomplished this simply by pasting the nav class="navigation" code below the tag. Unfortunately, this does not work because it "pushes" the vertical scroll bar into the section. I don't want that. I want it to stay on the right hand side of the screen, specifically so the user can put their mouse anywhere on the screen and scroll.

Note that the solution doesn't necessarily need to use Flexbox... but it's probably the best way, according to my previous trials.

Here is a CodePen recreation of my actual code:

https://codepen.io/rolandmackintosh/pen/ZEOGorB

This thread and this other thread are directionally related, but do not answer my question. There are a few more that don't quite answer the same thing.

As a final note, I'm sure what I want to do is possible, as Twitter does it!

Cheers to all who help

edit: If it is impossible with flexbox, please tell me so I can try a different solution.

edit2: this jsfiddle accomplishes two fixed sidebars with the vertical scroll on the right hand side, BUT when I fix the center's width to 600px, the sidebars do not auto-expand to fill the empty space. http://jsfiddle.net/RsRf9/2/

score 2 · Answer 1 · answered Oct 12 '20 at 03:39

There are many ways to do this. This is not exactly flexbox way, but it helps.

main {
  display: flex; 
    justify-content: center;
}

article {
  border: 1px solid black;
  max-width: 60%;
  align-self: center;
}

.aside1 {
  border: 1px solid red;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
   min-width: 20%;
     max-width: 20%;
}

.aside2 {
  border: 1px solid red;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  min-width: 20%;
    max-width: 20%;
}

<body>
  <main>
    <aside class="aside1">foo
    </aside>
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
    <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p>
    <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
    <p>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
    <p>Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
    <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
    <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. </p>
    </article>
    <aside class="aside2">baz
    </aside>
  </main>
</body>

Would you show another way? When I try this, removing the ```aside```s from the document flow with ```position: fixed;``` makes the ```article``` shove itself up against the left side of the screen, behind the left sidebar. I don't think that's fixable either: The ```article``` should be positioned between the surrounding 2 elements... So the css has to "know" about the left and right sidebars — Roly Poly, Oct 12 '20 at 06:16
I added ```justify-content: center``` under ```main``` which I previously overlooked. It's closer: Now there is a vertical white space on the left and right of the ```section```. If there was a way to make the ```aside```s automatically choose the right width... setting ```width: auto``` on the asides makes the right sidebar take ~45% of the screen. Stuck! — Roly Poly, Oct 12 '20 at 06:25
@RolyPoly Well, the width of the asidw can be auto, but you have to specify a min-width to make some space to aside. Since, a container takes only its width or its children width you have to specify min-width to the aside container or width to the child of aside(which I wouldn't recommend). Try adding min and max width to aside and make width to auto. — Amarender Reddy, Oct 13 '20 at 16:39

score 2 · Answer 2 · answered Oct 13 '20 at 06:39

2

You might be looking for something like this. This was fairly simply doable by floats but its ok.

main{
  display: flex;
}
article {
  border: 1px solid black;
  width: 600px;
}

aside {
  border: 1px solid red;
  height: 100vh;
  flex: 1;
  position: sticky;
  top: 0;
}

Note

Keep flex: 1 for aisdes and flex: 0 (or ignore this declaration) for article.

sticky is what you are looking for.

answered Oct 13 '20 at 06:39

abdullahQureshee

322
2
12

With this one, the sidebars seem to stick to the top of the page. I want them to follow the viewport down as the user scrolls. ```position: fixed``` fixes them to the viewport like I want them to be, BUT that removes them from the document flow, making the ```article``` div collapse to the left. What is the ```float``` solution? – Roly Poly Oct 16 '20 at 03:27
Am trying it in a separate project, isolated from any conflicting CSS. It's working there. Thank you! – Roly Poly Oct 16 '20 at 03:46

score 2 · Accepted Answer · answered Oct 13 '20 at 06:55

If you are thinking of using flexbox, here is the solution to make this layout work. Use the property of position: sticky; , It will give you the behavior you want in there.

  body {
  width: 100%;
}

main {
  display: flex; 
  justify-content: space-between;
}

article {
  border: 1px solid black;
  width: 600px;
}

aside {
  border: 1px solid red;
  height: 100vh;
  flex: 1;
  position:sticky;
  top:0;
}

How to keep the left and right flex elements (sidebars) fixed while the middle element scrolls, with the scroll bar on the right?

3 Answers3