Re: [css-flexbox] How should scrollbars affect flex item sizing?

On 04/06/2016 06:45 PM, Christian Biesinger wrote:
> Hi!
>
> I would like to request some clarification in the flexbox spec on how
> the presence/absence of scrollbars should affect flex item sizing,
> especially with overflow: auto.

https://www.w3.org/TR/CSS21/visufx.html
# In the case of a scrollbar being placed on an edge of the
# element's box, it should be inserted between the inner
# border edge and the outer padding edge. Any space taken
# up by the scrollbars should be taken out of (subtracted
# from the dimensions of) the containing block formed by
# the element with the scrollbars.

> Specifically:
> - Presumably the hypothetical main size should include the scrollbar,
> ie. to compute the hypothetical main size of an overflow: auto item we
> have to lay it out and add the scrollbar size?

Yes, the hypothetical main size of the item must include
the scrollbar, as it takes up space within its outer edge.

Whether we add the scrollbar size or not depends on whether
we are using a definite or indefinite size. If the size is
definite, then the scrollbar is included within that size,
and does not get added to it. But for computing the flex
item’s min-content or max-content size, it does need to get
added to that size.

> - If, after flexing, a scrollbar becomes necessary or is no longer
> necessary I assume that this won't affect the outer size of the flex
> item and will just lead to a bigger/smaller content size of the item?

It might affect the outer size of the flex item, if layout
without the scroll bar results in a different intrinsic
size, and the element is laid out at that size.

> - I haven't traced fully through the intrinsic size algorithms for
> this question but I assume they should lead to scrollbars being
> included the respective sizes

Yes, scrollbars are given their own space when present
(and not when absent). They are only present when needed,
and whether they were present or absent in the past should
not have any effect on the present layout. (CSS layout is
stateless.)

Basically, you first try to do layout without scrollbars,
then if it overflows, redo layout with scrollbars.

The rules in Flexbox are just like the rules in Block layout.
(Granted, none of this is very clear in the CSS2.1 wording,
but hopefully we'll figure out a way to clarify in Overflow.)

~fantasai

Received on Thursday, 7 April 2016 00:04:21 UTC