Refine scroll container definition and details - #45937
Conversation
Clarified the definition of a scroll container and detailed the behavior of its overflow values. Added information about the scrollport and how content is scrolled.
github-actions
Bot
added
Content:Glossary
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
Hi @kamikkels, and thanks for your contribution. I think there are definitely some valid improvements here; I have a few comments for you to consider
| - `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. | ||
|
|
||
| Because scroll container status comes from the `overflow` value, it affects layout even when nothing overflows, for example a scroll container that is a flex item has an automatic minimum size of `0`. |
There was a problem hiding this comment.
I don't think this line is really relevant to what a scroll container is. put it somewhere else, like maybe https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow, if isn't covered there already?
There was a problem hiding this comment.
probably needs to be more clearly worded, but this was more about scroll containers always affecting layout in the same way, regardless of what the content inside is doing, which results in things like captive sticky elements, and the container not sizing to its children
updated to a hopefully clearer description
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Clarified the behavior of scroll containers regarding their overflow values and layout effects.
![github-actions[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
Preview URLs (1 page) (comment last updated: 2026-10-02 15:05:08) |
| - 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 |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
error MD001/heading-increment Heading levels should only increment by one level at a time [Expected: h2; Actual: h3]
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
OK, so after a bit of fiddling around and a couple of small edits, this is now ready to merge. Thanks again for your work on this, @kamikkels!
3 participants
Description
Clarified the definition of a scroll container and detailed the behavior of its overflow values. Added information about the scrollport and how content is scrolled.
Motivation
Was looking at flex item behavior with
min-widthandoverflow: 'auto'and the old article wasn't describing what was happeningAdditional details
https://www.w3.org/TR/css-overflow-3/#overflow-control
Related issues and pull requests