css overflow scroll bar appears even when there is nothing to scroll

Question

I am using overflow:scroll like the code below, the issue I am having is that even if there is no text the scroll bar still shows.
demo on w3schools: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow you see that even if you cant scroll horizontally (left or right) there is still a scrolling bar. I am trying to have it where the scrollbar doesn't appear if there is nothing to scroll to.hope this makes sense

<style type="text/css">
  div.scroll {
    background-color: #00FFFF;
    width: 100px;
    height: 100px;
    overflow: scroll;
  }
</style>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

Answer 1

I think you are looking for overflow: auto.

Mozilla's Documentation on Overflow

The overflow CSS property is shorthand for the overflow-x and overflow-y properties, and specifies what to do when content is too large to fit in its block formatting context.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.

auto

Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

Answer 2

Try

overflow: auto

The link you provided is really complicated. Here is everything explained, I think much better: CSS-Tricks