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 the main area in which posts will be displayed and I want to hide the scroll bar if the 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

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

For more information, refer to this document: http://jsfiddle.net/CSkDu/1/