Overflow

The overflow property specifies what happens to the content of a block-level element when the content doesn't not fit into the space allocated for the element.


PropertiesDescription
visiblethe content is not clipped and will be rendered outside of the box element
hiddenthe content is clipped and cannot be scrolled
scrollthe content is clipped but can be scrolled
autothe value is browser dependent
inheritthe value is inherited from the parent.


There are other two overflow properties which are specific to x or y axis.

PropertiesDescription
overflow-xspecify an overflow behavior along x-axis only
overflow-yspecify an overflow behavior along y-axis only


Notes
If the overflow property is not set, the default value visible will be set.


snippet
<html>
<head>
<style>
div{border: 1px solid #000000}
</style>
</head>
<body>
<form>
<div style="width:300px; height:250px; overflow: hidden">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</div>

<div style="width:300px; height:250px; overflow: visible">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</div>

<div style="width:300px; height:250px; overflow: scroll">
Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos
harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum
blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam</div>
</form>
</body>
</html>
Related Tutorial
2. Padding
3. Margin
4. Border
5. Cursors