Hiding scroll bar of a DIV

Question

Currently I am using the following code to display scroll bar:

div.productsTree{
  height:300px;
  overflow:scroll;
}

While using this CSS the scroll bars are visible all the time, meaning even when the content inside the div doesn't overflow.

How can I hide them when the content fits within the mentioned height?

Answer 1

//Both x,y axis scroll
div.productsTree{
  height:300px;
  overflow:auto;
}

//only x axis scroll
div.productsTree{
  height:300px;
  overflow:auto;
  overflow-y: hidden;
}

//only y axis scroll
div.productsTree{
  height:300px;
  overflow:auto;
  overflow-x: hidden;
}

Answer 2

With overflow:auto;. That's all.