Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

Question

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

I am currently designing a webpage with three main elements: a left sidebar, a right sidebar, and a central feed that is 600px wide and scrolls. The scroll bar must be positioned on the right side of the screen, allowing users to scroll by simply using the mouse wheel from any point on the page.

My initial setup is similar to a codepen example I came across on StackOverflow:

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

The codepen features a fixed left sidebar created using flexbox. I am aiming to achieve a similar setup with a right sidebar, almost identical to this example: https://codepen.io/rolandmackintosh/pen/bGedMoX

Although I attempted to include the nav class="navigation" code below the section tag, it ended up pushing the vertical scroll bar into the section, which is not the desired outcome. I want the scroll bar to remain on the right side of the screen, enabling users to scroll from anywhere on the page.

While the solution does not necessarily have to involve Flexbox, my previous attempts have led me to believe it might be the most effective approach.

For reference, here is a recreation of my code in a CodePen:

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

Although some related threads like this one and this one offer guidance, they do not exactly address my specific query. I have also explored other threads without finding a perfect solution.

Interestingly, Twitter seems to have implemented a similar functionality, proving that it is indeed possible.

Thank you to all who can provide assistance.

edit: If achieving this with flexbox is not possible, kindly let me know so I can explore alternative solutions.

edit2: I found a jsfiddle that successfully features two fixed sidebars with a vertical scroll on the right side. However, when I set the center's width to 600px, the sidebars do not automatically expand to fill the remaining space. http://jsfiddle.net/RsRf9/2/

html css flexbox

Answer 1

Answer №1

If you're considering using flexbox for your layout, here's a helpful solution that can make it work effectively. Implement the position: sticky; property to achieve the desired behavior.

  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;
}

Answer 2

If you're considering using flexbox for your layout, here's a helpful solution that can make it work effectively. Implement the position: sticky; property to achieve the desired behavior.

  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;
}

Answer 3

Answer №2

There are numerous methods to achieve this outcome. While it may not strictly adhere to flexbox principles, it can still be effective.

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>

Answer 4

There are numerous methods to achieve this outcome. While it may not strictly adhere to flexbox principles, it can still be effective.

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>

Answer 5

Answer №3

If you're seeking a solution similar to this, achieving it was quite simple with the use of floats, but that's okay.

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

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

Important Reminder

Make sure to maintain flex: 1 for the asides and use flex: 0 (or simply omit this declaration) for the article.

The key feature you're seeking is sticky.

Answer 6

If you're seeking a solution similar to this, achieving it was quite simple with the use of floats, but that's okay.

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

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

Important Reminder

Make sure to maintain flex: 1 for the asides and use flex: 0 (or simply omit this declaration) for the article.

The key feature you're seeking is sticky.

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

Answer №1

Answer №2

Answer №3

Similar questions

What are some ways to eliminate spacing between child and parent div elements?

HTML tag data search using Regex

Ensuring even distribution of three divs within a container

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

Infinite layers of options in the dropdown navigation bar

Stretchable navigation cell

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

Showing MYSQL data in an html table

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

The bootstrap 4 dropdown button fails to activate the dropdown feature

Adding quotes is optional when using the append function

Update the content of a div in place

Is there a way to place a badge alongside a carousel using Bootstrap?

Limited functionality: MVC 5, Ajax, and Jquery script runs once

The hierarchy of CSS in Vue components

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

Immersive viewing experience

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

Ways to ensure the first div always expands when sorting in AngularJS

Attempting to implement a functionality that will allow users to easily delete records from the database