How can i make this options hide so i can use a scrollbar to reach them?-CodePudding

here is what i mean

The question is: What can i do to prevent that and make the other options go like 'under' the div, so i can scroll to reach them?

this is the css code:

aside {
    background-color: #E63946;
    height: 100%;
    width: 100%;
    grid-column: 1;
    grid-row: 2/5;
    display: grid;
    place-items: center;
    grid-template-rows: repeat(5,1fr);
}

Also tried adding overflow-y: scroll; but didn't work. here its how it look like.

CodePudding user response：

Use overflow-y: scroll; on the options container and set it to a fixed height. Here are examples

CodePudding user response：

Using overflow-y: scroll and setting a fixed height on the div container is correct but it's not the complete answer.

The reason why the 'options' in the grid are not overflowing is because the height of the grid's rows is set to 1fr and the height of the elements (divs?) containing the 'option' text is not fixed. This means that the height of the 'option' elements will adjust to fit inside the grid. However, they will overflow if you add so many 'options' that the elements' height become the height of the text they contain. Try adding 50 'options' in the grid and you will see a scrollbar.

If you don't want to add 50 'options' and only want a few to overflow, set a fixed height on the grid rows (eg. grid-template-rows: repeat(8, 100px)) or on the 'option' elements themselves, keeping overflow-y: scroll and a fixed height on the div container, of course.