Example of Overflowing Content Confined using overflow:auto
Style sheet
.elementBox {
overflow: auto;
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.
Firefox only displays horizontal or vertical scroll bars as needed. However, this behavior is browser-dependent. Some may display both scroll bars regardless of whether they are needed, or they may even not provide scroll bars at all (this is rare, but possible).
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.