CODEWITHSUNDEEP
htmlcssreactjsjss
Manny
Manny

Reputation: 156

Enable scrollbar on div tag of HTML whenever browser size is reduced & data overflows using CSS / JSS

I have created a menu options using DIV tag of HTML as visible in the image available at the following link: - https://ibb.co/4F2YmdP

My height of the vertical menu should always be 100% or auto when in complete browser screen. A scrollbar should be enabled only when I reduce the browser size and my content overflows out of the browser screen.

WHAT I AM NOT LOOKING FOR:-

  1. to hard code the value of height. I want it to remain either 100% or auto.
  2. to hard code the screen size in a condition and only if the screen is smaller than that size, then again hard code the height and overflow value of "scroll" something like this: -
@media (min-width: pixel value) and (max-width: pixel value)
{
    height: "browser size";
    overflow: "scroll";
}

This is because number of options of my menu would always change. If I hard code the min-width & max-width size of browser then I would have to always get the dynamic height of the menu and then have to compare it to the browser size in order to find out when my data of menu is getting overflown.

I wouldn't just want a scroll bar even if the content is not overflown in a smaller browser screen.

WHAT I SAW IN MY CODE: -

  1. When I hard code the value of the menu to a smaller percentage, such that my content overflows in a complete open browser, then scroll is enabled (i.e. it was working) using my below mentioned code.

  2. When I hard code the value of height to a larger percentage, such that my content doesn't overflows in a complete open browser, then scroll is disabled using my below mentioned code. It also doesn't gets enabled when I reduce the screen size of the browser.

My Code is available at - https://www.w3schools.com/code/tryit.asp?filename=G6OXAY52FM5Q

Click on the "run" button to check the output.

WHAT ALL I TRIED: -

  1. Added a wrapper around my main div in order to create a parent, child relation as mentioned in - Only Enable Scrollbar on Body And Disable on Other Div with CSS HTML (included this in my code as well)

  2. Added CSS "position: relative;" as mentioned in few SO answers but didn't quite help me.

My original use case is basically on a menu component made in React.js using typescript & JSS. However, If this works in CSS, I can incorporate the same changes in JSS.

I have uploaded the same code in JSS available at - https://codesandbox.io/s/keen-smoke-ygdxy

If you are comfortable in react & jss, you could use the above link for the same question.

Expectation is just to have a y-scrollbar when browser size is reduced and only when in that the reduced size of the browser makes the menu options overflow the visible screen.

Upvotes: 1

Views: 112

Answers (2)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add this your index.js

 wrapper: {
    width: "200px",
    height:"90vh",
    overflow:"auto",
  },

https://codesandbox.io/s/hardcore-night-1vr0i

Upvotes: 2

Robin Mehra
Robin Mehra

Reputation: 161

This is a CSS Problem. You have to give height of the element in pixels (em,rem for responsive) in order to achieve the scrollable property.

But you can give the height smartly using the calc method. For Example:

@media (min-width: pixel value) and (max-width: pixel value)
{
    height: calc(100vh - 50px);
    overflow: "scroll";
}

Note: vh: Vertical Height which can be used in any browser

Upvotes: 1

Related Questions