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 will be displayed and I want to hide the scroll bar if content does not exceed the current width.

Also, my second question. I want to make it so when the posts exceed the current width, the width will increase automatically and the content won't go out of the box.

Does anyone have a clue how to do this?

Posts area:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Main website container:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

Do you want to hide the vertical or the horizontal scroll bar? Can you post the example with html code to, e.g., jsfiddle.net and link it here — RJo
– RJo, Commented Sep 10, 2013 at 10:49
Hello, I posted the 2 classes I am using. On the html, nothing but calling classes. — Thanos Paravantis
– Thanos Paravantis, Commented Sep 10, 2013 at 10:50

Mm-Art-In · Accepted Answer · 2020-03-03 12:48:55Z

1188

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

edited Mar 3, 2020 at 12:48

Mm-Art-In

23k13 gold badges81 silver badges144 bronze badges

answered Sep 10, 2013 at 10:47

RJo

16.4k5 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thanos Paravantis Over a year ago

I could but I need some help with my second question also, about the width, auto increasing.

RJo Over a year ago

You can always try to use the stackoverflow search: stackoverflow.com/questions/450903/…

Green Over a year ago

Where is scroll in your examples?

Shadow Over a year ago

While setting the overflow-y: auto solved my problem - the link does not actually show an example of this...

Edward D'Souza Over a year ago

Should note that overflow-x: auto also works to hide horizontal scrollbars.

Jacob · Accepted Answer · 2017-01-13 19:22:44Z

74

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;}

edited Jan 13, 2017 at 19:22

Jacob

2,1691 gold badge13 silver badges21 bronze badges

answered Oct 31, 2016 at 18:14

Ayyappan K

1,2169 silver badges9 bronze badges

Comments

Prateek Arora · Accepted Answer · 2019-09-18 13:08:09Z

14

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

answered Sep 18, 2019 at 13:08

Prateek Arora

6668 silver badges7 bronze badges

2 Comments

Akash Over a year ago

Answer doesn't add any extra value

Beginner Over a year ago

@Akash its to the point, I like it

Ayyappan K · Accepted Answer · 2017-08-01 06:49:00Z

12

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;}

answered Aug 1, 2017 at 6:49

Ayyappan K

1,2169 silver badges9 bronze badges

Comments

Toqeer Yousaf · Accepted Answer · 2021-04-14 11:15:03Z

11

overflow:auto; used to display auto scrollbar

answered Apr 14, 2021 at 11:15

Toqeer Yousaf

4145 silver badges9 bronze badges

3 Comments

Eric Aya Over a year ago

Same as other answers such as stackoverflow.com/a/40348064/2227743

Akash Over a year ago

Answer doesn't add any extra value

General Grievance Over a year ago

@Akash If you're certain that an answer is a copy-paste/duplicate/plagiarism, you can and should raise a custom flag. Just link to the original answer and explain your reasoning, e.g. "This answer is a duplicate because it is copied from xxx from y years ago."

Suraj Rao · Accepted Answer · 2022-07-28 10:24:50Z

10

.container {overflow:auto;}

will do the trick. If you want to control a 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 your content default height is smaller than the container height; if not, the scroll-bar will not be hidden.

edited Jul 28, 2022 at 10:24

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Mar 7, 2018 at 17:58

Neero

1171 silver badge2 bronze badges

1 Comment

Akash Over a year ago

Answer doesn't add any extra value

Collectives™ on Stack Overflow

CSS hide scroll bar if not needed

6 Answers 6

5 Comments

Comments

2 Comments

Comments

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

2 Comments

Comments

3 Comments

1 Comment

Linked

Related