Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions files/en-us/glossary/scroll_container/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,23 @@ page-type: glossary-definition
sidebar: glossarysidebar
---

A **scroll container** is an element box in which content can be scrolled, whether or not scroll bars are present. A user agent adds scroll bars to an element box to make it a scroll container when the CSS {{cssxref("overflow")}} property is set to `scroll` or when `overflow` is set to `auto` _and_ the content overflows the container.
A **scroll container** is an element box whose content can be scrolled, whether or not scroll bars are present. An element box becomes a scroll container when its {{cssxref("overflow")}} property (or {{cssxref("overflow-x")}} or {{cssxref("overflow-y")}}) is set to `scroll`, `auto`, or `hidden`.

When the content of an element box overflows its bounding box, users can use scroll bars to scroll through the clipped content that is otherwise hidden from view.
Each scroll container `overflow` value controls when scroll bars are shown:

A scroll container includes a scrollport and scroll bars.
- `scroll`: Scroll bars are always shown, if the platform displays them.
- `auto`: Scroll bars are shown only when the content overflows the box.
- `hidden`: No scroll bars are shown, and the user can't scroll the content directly, but it can still be scrolled programmatically, for example with {{domxref("Element.scrollTo()")}} or by focusing an element inside it.

A scroll container always:

- Establishes a new block formatting context, so it contains floats and its margins don't collapse with its children's margins.
- Scts as the reference box for descendants with {{cssxref("position")}} set to `sticky`.
- Has an automatic minimum size of 0 when it is a flex or grid item, so it can shrink smaller than its content.

## Scrollport

The scrollport is the visible part of a scroll container and coincides with the padding box of the scroll container. The scroll bars are used to move content in and out of the scrollport so that the content can be viewed.
A scroll container has a **scrollport** — this is the visible part of a scroll container and coincides with the scroll container's padding box. Scrolling moves content into and out of the scrollport for viewing.

## See also

Expand Down
Loading