HTML and CSS Reference
tical and horizontal scroll bars for an overflow: scroll; element, even if the content of that element
overflows only on one axis. Chrome and Safari are a little more intelligent and show a scroll bar only when
it is needed. To work around this and make the experience more consistent across browsers, you can use the
properties overflow-x and overflow-y .
Because the .post element has a specified height with the default width auto , it never overflows horizont-
ally, only vertically. So, to make Firefox, Opera, and Internet Explorer show only a vertical scroll bar, you
can move on to step 4.
Figure 9-28 The “Latest Blog Post” with a scroll bar to allow the user to see overflowing content. Viewed in Firefox on
an Apple Mac to the left and Firefox on a Windows PC to the right.
4. Change the property overflow to overflow-y :
5. Save styles.css.
Now, as you can see in Figure 9-29, all browsers show only the vertical scroll bar.
Figure 9-29 The “Latest Blog Post” with a vertical scroll bar only. Viewed in Firefox on an Apple Mac to the left and
Firefox on a Windows PC to the right.