[css-sizing-4] Define the interaction of c-i-s and scrollbars, per WG resolution. Fixes w3c#4415.

Author: tabatkins

css-sizing-4/Overview.bs

@@ -479,7 +479,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 	Percentages: n/a
 	Animation type: by computed value type
 	</pre>
-	
+
 	This property allows elements with [=size containment=] to specify
 	an <dfn export>explicit intrinsic inner size</dfn>,
 	causing the box to size as if its in-flow content
@@ -504,7 +504,7 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 	while still allowing it to size as if it had content.
 
 	Values are defined as:
-	
+
 	<dl dfn-type=value dfn-for="contain-intrinsic-size">
 		: <dfn>none</dfn>
 		::
@@ -521,6 +521,82 @@ Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-size' property</h3>
 			it defaults to the same value as the first.
 	</dl>
 
+<h4 id='cis-scrollbars'>
+Interaction With ''overflow: auto''</h4>
+
+	The 'contain-intrinsic-size' property provides an estimate
+	of how large the author expects the content of an element to be,
+	but this estimate is not actual content
+	and does not represent anything that needs to be shown to the user.
+	Therefore, an element with ''overflow: auto'' must not generate scrollbars
+	as a consequence of 'contain-intrinsic-size'.
+
+	However, if 'contain-intrinsic-size' indicates a size large enough
+	that the element would generate scrollbars
+	if it contained actual content of that size,
+	then the element must be <em>sized</em> as if it generated those scrollbar(s)
+	in accordance with such hypothetical content.
+
+	<div class='example'>
+		In the following example code:
+
+		<pre highlight=css>
+		div {
+			width: max-content;
+			contain-intrinsic-size: 100px 100px;
+			overflow: auto;
+		}
+		</pre>
+
+		The element ends up being ''100px'' wide and ''100px'' tall:
+		'contain-intrinsic-size' provides the max-content width,
+		and also the height.
+
+		If the element then ended up with content that was ''150px'' tall,
+		it would show a vertical scrollbar;
+		if the scrollbar is not overlay,
+		it will take up some of that ''100px'' width,
+		leaving a smaller amount
+		(roughly ''84px'', typically)
+		for the content to flow into.
+		(See [[css-overflow-3#scrollbar-layout]].)
+
+		Even though there's now less than ''100px'' of horizontal space available for the content,
+		it will not generate a horizontal scrollbar just because 'contain-intrinsic-size' indicates a ''100px'' width;
+		that would only happen if the actual content
+		had something unbreakable
+		and wider than the remaining space.
+	</div>
+
+	<div class=example>
+		In contrast, in the following example code:
+
+		<pre highlight=css>
+		div {
+			width: max-content;
+			contain-intrinsic-size: 100px 100px;
+			height: 50px;
+			overflow: auto;
+		}
+		</pre>
+
+		The element has a fixed ''50px'' height,
+		but 'contain-intrinsic-size' indicates a ''100px'' “estimated content height”.
+		The element thus assumes that it will need a vertical scrollbar
+		when it's filled with actual content,
+		resulting in a max-content width a little more than ''100px''
+		(roughly ''116px'', typically),
+		to accommodate the estimated ''100px'' of max-content width from 'contain-intrinsic-size',
+		and as well as the vertical scrollbar width (roughly ''16px'', typically).
+
+		However, even though the element reserves space on the assumption of needing a scrollbar,
+		it will not actually generate one
+		unless the actual content overflows:
+		if it ends up containing content that's less than 50px tall,
+		no vertical scrollbar will be generated at all,
+		but the element will still be ''116px'' wide.
+	</div>
+
 
 <!--
  ██████   ███████  ██    ██ ████████ ████████  ████ ████████   ██████