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

Answer 1

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

Answer 2

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