<!DOCTYPE html> <html> <head> <style> .ex1 { background-color: lightblue; width: 165px; height: 120px; overflow: auto; } .ex2 { background-color: lightblue; width: 165px; height: 150px; overflow: auto; } </style> </head> <body> <h1>The overflow Property</h1> <h2>overflow: auto with Scroll Bar</h2> <div class="ex1">As you can see in the example above, the same overflow:auto is applied to both the divs. Only that div has the scroll bars visible that contain overflow.</div> <h2>overflow: auto with no Scroll Bar</h2> <div class="ex2">The other div has no scroll bars because the content fits inside the container.</div> </body> </html>
