A div will grow to fit the content if the height is not set in styles. Create a new page called overflow.html. Delete the link element so there are no styles. In the embedded style sheet make the background colour for all div elements yellow. In the HTML put a div with a single short paragraph inside it. Save and view.
Now copy the paragraph under itself so you have four altogether - all inside the div element. Save and view again and you should see that the div has grown to fit the paragraphs. To stop the div from growing (it might be getting in the way of other stuff on the page) add this to the embedded style sheet rule for divs:
Try it and you can see from the yellow that the div is no longer growing. Unfortunately the text just carries on anyway (outside of the div it is "in"). To stop it hide the overflowing bit:
So that any extra text is hidden. The trouble is now it cannot be read. Try the page and then change the CSS to this:
Try the page and you will see that having a horizontal scroll bar seems unnecessary in this case as there is nothing to scroll to. Therefore it is better to do this:
You should now just have a vertical scroll bar which most people will be happy to use to see the rest of the text. The end result should be this:
If you ever need a horizontal scroll bar use overflow-x:scroll;.