Image Gallery: Fixed window size that allows scrolling for multiple images

1

Hi, this is my first time asking a question in a forum on a project I’m working on. This is not for FreeCodeCamp.

I designed an image gallery where the left half of the page will have the grid of images (now there are just 4) and the right side will have the focused image enlarged. My question is, is there a way to have the left side stay the same height as the window while more images are added to it? I want a scrollbar to show so the user can see more images, but not have the entire window itself have a scrollbar. I hope this is clear.

The code is here: https://github.com/Dana94/flower-slideshow

Here’s a screenshot:

flower gallery.PNG1366×665 619 KB

As you can see, the window already has a scrollbar on the far right side because there are many small images on the left grid already. What I am trying to figure out is how to keep the images contained so when there are many, a scrollbar for the left grid will appear and not have the entire window height enlarge.

Thank you!

-Dana

2

Hi there. Sorry without reading too much of your code do you think adding CSS overflow: scroll to your left side grid would be appropriate?

Relevant link:

3

I didn’t think about this, will look into it. Thanks!

4 
height:100vh

100vh will make sure div height is same as full window size

overflow: scroll;

will do the trick. and in your case you need to add this css inside your #gallery