Example of Overflowing Content Confined using overflow:scroll
Style sheet
.elementBox {
overflow: scroll;
height: 5em;
color: #000; background-color: #DDD;
}
.tallContent {
float: right;
width: 25%;
padding: 1em;
margin: 0.5em 1em 1em 1.5em;
color: #000; background-color: #CFF;
line-height: 1.5em;
text-align: justify;
}
This is the rendered result.
Both scroll bars are provided, whether or not the content calls for them.
This text is floating within the paragraph. As you can see, the length of the text causes it to overflow the containing block.
...
Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc,
non auctor diam nisi interdum nisl.
Sed a tortor in erat porta laoreet.
This element has a
height of 5em.
There is too much text for the content area of this element,
so the content overflows the bottom of the element box.
...
Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum.
Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl.
Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem.
Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.
Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor.
Mauris vulputate imperdiet ipsum.