https://drafts.csswg.org/css-overflow-3/#scrollable
Note: This padding represents, within the [scrollable overflow rectangle](https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle), the box’s own padding so that when its in-flow content is scrolled to the end, there is padding between the end-edge of its content and the border edge of the box. It typically ends up being exactly the same size as the box’s own padding, except in a few cases—such as when an out-of-flow element, or the visible overflow of a descendent, has already increased the size of the scrollable overflow rectangle outside the conceptual “content edge” of the [scroll container](https://drafts.csswg.org/css-overflow-3/#scroll-container)’s content.
As written the note uses the in-flow and out-of-flow terminology. This leaves out the subtle distinction of floats[1].
Floats are halfway between being inflow, and out-of-flow. For this specific case, at the top level, they behave the same as in-flow content. For example they contribute to the intrinsic size of elements.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10479
<div style="display: flow-root; width: min-content; height: min-content; background: green;">
<div style="float: left; width: 100px; height: 100px;"></div>
</div>
Due to this Blink will include these top-level floats as part of the alignment rectangle. E.g.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10480
<div style="overflow: scroll; width: 60px; height: 60px; padding: 10px;">
<div style="float: left; width: 100px; height: 100px; background: green;"></div>
</div>
I suspect the note should likely refer to: "out-of-flow positioned elements", and "non out-of-flow positioned elements" instead of "out-of-flow elements", and "in-flow" elements respectively.
Ian
[1] Note: floats grouped together with out-of-flow-positioned elements is rarely useful.
https://drafts.csswg.org/css-overflow-3/#scrollable
Note: This padding represents, within the [scrollable overflow rectangle](https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle), the box’s own padding so that when its in-flow content is scrolled to the end, there is padding between the end-edge of its content and the border edge of the box. It typically ends up being exactly the same size as the box’s own padding, except in a few cases—such as when an out-of-flow element, or the visible overflow of a descendent, has already increased the size of the scrollable overflow rectangle outside the conceptual “content edge” of the [scroll container](https://drafts.csswg.org/css-overflow-3/#scroll-container)’s content.As written the note uses the in-flow and out-of-flow terminology. This leaves out the subtle distinction of floats[1].
Floats are halfway between being inflow, and out-of-flow. For this specific case, at the top level, they behave the same as in-flow content. For example they contribute to the intrinsic size of elements.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10479
Due to this Blink will include these top-level floats as part of the alignment rectangle. E.g.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10480
I suspect the note should likely refer to: "out-of-flow positioned elements", and "non out-of-flow positioned elements" instead of "out-of-flow elements", and "in-flow" elements respectively.
Ian
[1] Note: floats grouped together with out-of-flow-positioned elements is rarely useful.