Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS overflow-y property</title> <style> div { width: 250px; height: 150px; border: 1px solid #cccccc; } div.scroll { overflow-y: scroll; } div.hidden { overflow-y: hidden; } </style> </head> <body> <h1>Play with the size of div boxes to see how it works</h1> <h2>overflow-y:scroll</h2> <div class="scroll"> You can view the overflowed content using vertical scrollbar. You can view the overflowed content using vertical scrollbar. You can view the overflowed content using vertical scrollbar. You can view the overflowed content using vertical scrollbar. You can view the overflowed content using vertical scrollbar. </div> <h2>overflow-y:hidden</h2> <div class="hidden"> The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. The content overflows at the vertical edges is hidden. </div> </body> </html>