CSS hide scroll bar if not needed

Question

I am trying to figure out how I can hide the overflow-y:scroll; if not needed. What I mean is that I am building a website and I have a main area which posts wi

Answer 1

.container {overflow:auto;} will do the trick. If you want to control specific direction, you should set auto for that specific axis. A.E.

.container {overflow-y:auto;} .container {overflow-x:hidden;}

The above code will hide any overflow in the x-axis and generate a scroll-bar when needed on the y-axis.But you have to make sure that you content default height smaller than the container height; if not, the scroll-bar will not be hidden.

Answer 2

Set overflow-y property to auto, or remove the property altogether if it is not inherited.

Answer 3

You can use overflow:auto;

You can also control the x or y axis individually with the overflow-x and overflow-y properties.

Example:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

Answer 4

.selected-elementClass{
    overflow-y:auto;
}

Answer 5

You can use both .content and .container to overflow:auto. Means if it's text is exceed automatically scroll will come x-axis and y-axis. (no need to give separete x-axis and y-axis commonly give overflow:auto)

.content {overflow:auto;}