CSS: Showing the horizontal and vertical scrollbars

It is pretty easy to show the horizontal and vertical scrollbars for block DOM elements such as a DIV.

You just need to set the following CSS properties for your div:

• width
• height
• overflow

You may also use the overflow-x property to show or hide the horizontal scrollbar and the overflow-y property to show or hide the vertical scrollbar.

Just use the following class with the style rules to show the horizontal and vertical scrollbars.

.scrollableContainer {
  background-color: #FCFCDD !important; 
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; 
  font-size:.9em; 
  padding: 10px; 
  width: auto;  
  height: auto;
  max-height: 500px; 
  overflow: auto; 
  word-wrap: normal;
  white-space: nowrap; 
}

Or you may apply it inline like this:

<div style="background-color: #FCFCDD; font-family: courier; font-size:.9em; padding: 10px; width: auto; height: auto; max-height: 500px; overflow: auto; word-wrap: normal; white-space: nowrap;" >

</div>