Kevin Powell - Community•2mo ago

how to make sidebar scroll-able.

hey, this is something i've been stumped on for a while. How would i make the sidebar on the left scrollable on the vertical axis, but not the "page" or content on the right? So the content on the right sticks whilst you're able to scroll through the would be nav. I'd appreciate any insight, thanks in advance. https://codepen.io/deerCabin/pen/QWXRage

8 Replies

razesh•2mo ago

Add height and overflow-y to your box-1 element You can check your codepen And you can adjust the height as per your requirements.

snxxwyy•2mo ago

That works, but I feel since you have to set a fixed height, you’ll end up having to adjust it depending on your use case which doesn’t help it be dynamic, unless that is the only way?

razesh•2mo ago

What do you mean by dynamic here ?? @snxxwyy Do you plan on changing the height of your sidenav ??

Chris Bolson•2mo ago

You can use a container and set the the height to be 100ch. Wrap the side columns in its own container. Give this container the property container-type: size; Then give your box-1 these styles:

.box-1{
overflow-y: auto;
  height: 100cqb;
}

.box-1{
overflow-y: auto;
  height: 100cqb;
}

snxxwyy•2mo ago

the result i got from that is exactly what i meant. Thanks chris. With the way that works, is that because container-type: size; is saying the container size is the exact way it is in the viewport and then the styles on box-1 works out how you're viewing the content? If not, could you please explain why it's working the way it is?

snxxwyy•2mo ago

though i've noticed that when you shrink the window and the box-2 content shrinks down, you can't scroll to access it?

Chris Bolson•2mo ago

yes, the issue here is that the 100cqb is giving it the height of its parent container which, as this is a grid, is based on the height of the main content block as it gets taller as the viewport gets narrower. I have only recently started looking at containers and container units so maybe there is something better. 🤔 Maybe you could set a max-height based on the viewport height on the .box-1 parent element. So you might have something like this:

.side{
  container-type: size;
  height: 100%;
  max-height: calc(100vh - 2rem); /* calculate max height based on viewport height minus padding etc. */
}
.box-1{
  overflow-y: auto;
  height: 100cqb;
}

.side{
  container-type: size;
  height: 100%;
  max-height: calc(100vh - 2rem); /* calculate max height based on viewport height minus padding etc. */
}
.box-1{
  overflow-y: auto;
  height: 100cqb;
}

snxxwyy•2mo ago

Ah I see, no worries. I’ll give that a shot and experiment with it, thank you.

Gaming

Programming

how to make sidebar scroll-able.