/
Browse all pages

Horizontal scroll

Whether the page scrolls sideways, and the elements that cause it.

These cards are in the Design tab. Hover a row to outline its element on the page, and click it to select it, which fills the Element tab.

Layout says whether the page scrolls sideways. If not, it is one line, No horizontal scroll. If it does, it says by how many pixels and lists the elements that cause it, each with its likely cause.

  • Listed are elements whose far edge is past the window and that nothing crops (not fixed, and not inside a box that clips or scrolls). The far edge is the right one, or the left one in a page written right to left, which scrolls the other way.
  • Only the innermost are listed, since one wide child makes all its parents wide, widest first and up to 20.
  • Under each, what pushes it out: a width of 100vw, wider than the page beside its scroll bar; a negative margin; a left or right offset or a transform; text kept on one line; an image wider than its box; or a width or min-width wider than its box.
  • Hover one to outline it on the page, click it to select it.

Vertical overflow#

Below it, Vertical overflow lists boxes whose content is taller than the box and spills out below it, over what comes next: usually a fixed height the text outgrew, or floats that nothing clears. It shows only when there are some, furthest first. A box that clips or scrolls its content is left out, since nothing spills from it.

Overflow from pseudo-elements is not attributed.

Questions

Why does Layout list so few elements?

Only the innermost are listed, since one wide child makes all its parents wide, widest first and up to 20.

Is overflow from transforms shown?

No. Overflow from transforms and pseudo-elements is not attributed.