Example of Wide Content Confined using overflow:auto
Style sheet
.elementBox {
overflow: auto;
width: 600px;
color: #000; background-color: #DDD;
}
.wideContent {
width: 670px;
padding: 5px;
margin: 10px;
color: #000; background-color: #CFF;
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).
The containing block is 600 pixels wide.
The total width of the "wideContent"
DIV is 700 pixels, which exceeds the width of the containing block.
This causes the content to spill out the side of the containing block.
...
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.
The containing block is 600 pixels wide.