613

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;
}
2
  • 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
    Sep 10, 2013 at 10:49
  • Hello, I posted the 2 classes I am using. On the html, nothing but calling classes. Sep 10, 2013 at 10:50

6 Answers 6

1096

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

5
  • I could but I need some help with my second question also, about the width, auto increasing. Sep 10, 2013 at 10:53
  • You can always try to use the stackoverflow search: stackoverflow.com/questions/450903/…
    – RJo
    Sep 10, 2013 at 10:59
  • Where is scroll in your examples?
    – Green
    May 26, 2016 at 7:45
  • 15
    While setting the overflow-y: auto solved my problem - the link does not actually show an example of this...
    – Shadow
    Sep 15, 2016 at 4:20
  • 2
    Should note that overflow-x: auto also works to hide horizontal scrollbars. Sep 23, 2016 at 19:09
66

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;}
0
11
.selected-elementClass{
    overflow-y:auto;
}
2
  • Answer doesn't add any extra value
    – Akash
    Nov 21, 2021 at 16:49
  • @Akash its to the point, I like it
    – Beginner
    Feb 22 at 8:24
10

overflow:auto; used to display auto scrollbar

3
  • 4
    Same as other answers such as stackoverflow.com/a/40348064/2227743
    – Eric Aya
    Apr 14, 2021 at 11:34
  • Answer doesn't add any extra value
    – Akash
    Nov 21, 2021 at 16:49
  • @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." Dec 16, 2021 at 14:34
9

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

3
.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.

1
  • Answer doesn't add any extra value
    – Akash
    Nov 21, 2021 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.