The overflow CSS property (shorthand for overflow-x and overflow-y) controls the behavior when the content inside a box is larger than the box itself. It determines whether the content should overflow and be visible (overflow: visible), hidden (overflow: hidden), or scrollable (overflow: scroll or overflow: auto). The presence or absence of scroll bars depends on the overflow value used. Both scroll and auto will clip the content to the element’s padding box.
According to the specification, when an element uses scroll, scroll bars should be displayed when this value is set in one direction, regardless of whether there is overflowing content or not. With auto, scroll bars should only be displayed when there is actually overflow, meaning they should not be visible if the content is not larger than the container box. However, in practice, this behavior may be inconsistent. On a Mac, scroll bars are only visible when the user hovers over the scrollable element, while on Windows, scroll bars are often rendered even if there is no overflow when auto is used.
It’s worth reading the article “Scrollbars are becoming a problem” by Artemis Everfree for more information on scroll bars.
When it comes to width and height, it’s important to consider the inline and block axis. In the default horizontal writing mode, width corresponds to the inline axis and height to the block axis. However, when dealing with logical properties, writing modes, and direction, these rules may be flipped. For the purposes of this article, the focus is mainly on documents in the default horizontal writing mode.
The overflow property can be useful when dealing with content that is longer than the height of the viewport. It allows users to scroll to see the content. If a fixed height is set on an element and the content exceeds that height, overflow will occur. Although fixed heights are not commonly used on the web, there are exceptions, such as a layout with a fixed, full-height menu on the left of the content. In this case, if there are more menu items than can be shown, the user should be able to scroll to view them. This can be achieved by setting max-height: 100vh (or the fixed height) and overflow-y: auto on the left-hand element.
Sometimes unexpected overflow can cause layout bugs. This can happen with images, long words, or elements hidden off-screen with transforms. To prevent overflow caused by images, it’s common to add max-width: 100% to the CSS reset. When dealing with long words, overflow-wrap: break-word can be used to allow the text to wrap within a single word when there is insufficient space. Alternatively, text-overflow: ellipsis can be used to clip the text and display an ellipsis. When hiding elements off-screen with transforms, it’s important to remember that the transformed element can still cause overflow. To prevent this, the element can be hidden with display: none or by setting overflow: hidden on a parent element.
Flexbox layouts can also cause unexpected overflow. While individual elements may not have a fixed size, when combined they can be wider than the available space. Using flex-wrap: wrap can often solve this issue, especially for horizontal menus. However, in some cases, it may be necessary to adjust the intrinsic width of individual elements or modify the flex-grow, flex-shrink, or flex-basis values.
By setting overflow to scroll or auto on an ancestor of an overflowing element, the horizontal scrolling behavior can be delegated to the ancestor, thus removing it from the root element. This can be useful for creating scrollable galleries or tables.
Debugging overflow issues can be challenging. One technique is to comment out chunks of code in the DOM until the area causing the overflow is identified. Firefox dev tools can be particularly helpful in debugging overflow, as they provide tags indicating overflow and scrollable ancestors on inspected elements.
In some cases, when dealing with a fixed sidebar menu that needs tooltips positioned to the right of hovered elements, the combination of overflow-x: visible and overflow-y: auto is desired. However, this combination is not permitted. A potential solution is to position the tooltips outside the menu using CSS-only techniques, but accessibility considerations and the use of JavaScript may also need to be taken into account.
Source link
