Scroll Boxes
The trick to scrolling boxes is that the HTML element must be smaller than what it contains.
(The text in the pale green boxes (left) shows the HTML code for the yellow paragraph next to it).
I have given the blue text below a black border & yellow background to show the whole paragraph element. This first paragraph element does not have a specific height applied to it, and because of that it will automatically expand to accommodate the amount of text that it contains and therefore will not have scrollbars.
<p>Lorem ipsum dolor...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus accumsan magna, quis sagittis risus tempus quis. Cras ultrices ultrices efficitur. Phasellus ut odio viverra, lobortis tortor vel, faucibus arcu. Aenean dictum lacus faucibus risus bibendum efficitur. Donec dignissim mauris ut augue mollis, sed aliquam dolor consectetur. Aenean lorem elit, vulputate non faucibus ac, ullamcorper vitae nibh. Nunc sapien nulla, tincidunt id blandit accumsan, pretium sit amet lectus. Ut eu lectus ultrices, lobortis ligula a, eleifend metus. Mauris justo purus, vehicula sed fringilla vitae, tincidunt vel mi. Vestibulum sit amet tempor mauris. Nunc mauris nibh, fermentum nec volutpat luctus, luctus eget tortor. Mauris semper leo id sapien dictum tempor. Phasellus dapibus felis nunc.
The next paragraph element below has a value of 100px applied to its height property. The reason the text appears outside of the bottom of the paragraph element is because the paragraph element overflow property has a default value of visible, therefore the text overflows out of the bottom of the paragraph element but remains visible.
<p style="height:100px;">Lorem ipsum dolor...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus accumsan magna, quis sagittis risus tempus quis. Cras ultrices ultrices efficitur. Phasellus ut odio viverra, lobortis tortor vel, faucibus arcu. Aenean dictum lacus faucibus risus bibendum efficitur. Donec dignissim mauris ut augue mollis, sed aliquam dolor consectetur. Aenean lorem elit, vulputate non faucibus ac, ullamcorper vitae nibh. Nunc sapien nulla, tincidunt id blandit accumsan, pretium sit amet lectus. Ut eu lectus ultrices, lobortis ligula a, eleifend metus. Mauris justo purus, vehicula sed fringilla vitae, tincidunt vel mi. Vestibulum sit amet tempor mauris. Nunc mauris nibh, fermentum nec volutpat luctus, luctus eget tortor. Mauris semper leo id sapien dictum tempor. Phasellus dapibus felis nunc.
The paragraph element below has a value of 105px applied to its height property and it also has a value of hidden applied to its overflow property, therefore the text that overflows out of the paragraph element is hidden. It's still there in the HTML code, but you just can't see it.
<p style="height:105px; overflow:hidden">
Lorem ipsum dolor...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus accumsan magna, quis sagittis risus tempus quis. Cras ultrices ultrices efficitur. Phasellus ut odio viverra, lobortis tortor vel, faucibus arcu. Aenean dictum lacus faucibus risus bibendum efficitur. Donec dignissim mauris ut augue mollis, sed aliquam dolor consectetur. Aenean lorem elit, vulputate non faucibus ac, ullamcorper vitae nibh. Nunc sapien nulla, tincidunt id blandit accumsan, pretium sit amet lectus. Ut eu lectus ultrices, lobortis ligula a, eleifend metus. Mauris justo purus, vehicula sed fringilla vitae, tincidunt vel mi. Vestibulum sit amet tempor mauris. Nunc mauris nibh, fermentum nec volutpat luctus, luctus eget tortor. Mauris semper leo id sapien dictum tempor. Phasellus dapibus felis nunc.
The paragraph element below has a value of 100px applied to its height property and the overflow property has a value of auto applied to it. This auto value hides the content overflow, but adds scrollbars to enable you to see the hidden content.
<p style="height:100px; overflow:auto">
Lorem ipsum dolor...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras finibus accumsan magna, quis sagittis risus tempus quis. Cras ultrices ultrices efficitur. Phasellus ut odio viverra, lobortis tortor vel, faucibus arcu. Aenean dictum lacus faucibus risus bibendum efficitur. Donec dignissim mauris ut augue mollis, sed aliquam dolor consectetur. Aenean lorem elit, vulputate non faucibus ac, ullamcorper vitae nibh. Nunc sapien nulla, tincidunt id blandit accumsan, pretium sit amet lectus. Ut eu lectus ultrices, lobortis ligula a, eleifend metus. Mauris justo purus, vehicula sed fringilla vitae, tincidunt vel mi. Vestibulum sit amet tempor mauris. Nunc mauris nibh, fermentum nec volutpat luctus, luctus eget tortor. Mauris semper leo id sapien dictum tempor. Phasellus dapibus felis nunc.
Summary : For an element to show scrollbars...
1) Its height and or width have to be specified.
2) The overflow property has to be set to auto or scroll.
3) The contents must be too big for the element.