title: CSS hide scroll bar if not needed
body: <p>I am trying to figure out how I can hide the <code>overflow-y:scroll;</code> 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.</p>
  
  <p>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.</p>
  
  <p>Does anyone have a clue how to do this?</p>
  
  <p>Posts area:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Main website container:</p>
  
  <pre><code>.container {
      margin: 0 auto;
      width: 757px;
      margin-top: 30px;
      text-align: center;
  }
  </code></pre>