HTML and CSS Reference
In-Depth Information
Figure 6-22.
Browsers generate a vertical scrollbar for text, even when only overflow-x is set
As Figure
6-22
shows, Chrome generates a vertical scrollbar for text that's too large to fit the box when
overflow-x
is set to
auto
,
hidden
, or
scroll
. All other browsers in widespread use do the same. In the case of
scroll
, the horizontal scrollbar is understandable, because the specification says the scrollbar should be added
even if it's not needed. However, it's not clear whether the vertical scrollbars are an incorrect interpretation of the
specification.
Figure
6-23
shows the effect of using the same values with
overflow-x
when an image is too large for the box
(see overflow-x_image.html).
Figure 6-23.
Oversized images also generate a vertical scrollbar with overflow-x
The effect of using
hidden
with
overflow-x
is easier to understand on an image. The middle box in
Figure
6-23
doesn't have a horizontal scrollbar, so the horizontal overflow is genuinely hidden.
The behavior of
overflow-y
with text is more straightforward. Figure
6-24
shows the results in overflow-y.html.
Vertical scrollbars are generated by oversized text with
auto
and by
scroll
. But
hidden
results in no scrollbars,
leaving the oversized text inaccessible.