@@ -2253,28 +2253,40 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
2253
2253
Auto-sizing Other Orthogonal Flow Roots</h4>
2254
2254
2255
2255
<p> In order to limit the length of lines,
2256
- block containers have special auto-sizing behavior (defined <a href="#auto-multicol">above</a> )
2256
+ block containers have special auto-sizing behavior
2257
+ that triggers [=multi-column layout=]
2257
2258
when their <a>available inline space</a> is infinite
2258
2259
(which typically occurs when they establish an <a>orthogonal flow</a> ).
2259
2260
2260
- <p> Other layout models simply lay out into the infinite <a>available inline space</a>
2261
- at their <a>max-content size</a> .
2262
- However, they pass through the infinite <a>available inline space</a>
2263
- to block containers they contain,
2264
- possibly triggering that special auto-sizing behavior on those block containers
2265
- even though they do not themselves establish an <a>orthogonal flow</a> .
2261
+ <p> For calculating the [=automatic inline size=] for other [=display types=]
2262
+ when the available inline space is infinite,
2263
+ if the box is [=block level=]
2264
+ or the formatting context otherwise calculates
2265
+ an [=automatic inline size=] using its [=max-content=] size,
2266
+ use the same formula used for the [=block containers’=] 'column-width'
2267
+ (see <a href="#auto-multicol">above</a> )
2268
+ in place of that [=max-content size=] :
2269
+ <code> min(<var> max-content</var> , max(<var> min-content</var> , <var> constraint</var> ))</code> .
2266
2270
2267
2271
<div class="example">
2268
2272
<p> For example,
2269
- a table or <a>flex container</a> establishing an <a>orthogonal flow</a>
2270
- is laid out into its given <a>available space</a> .
2271
- If its <a>available inline space</a> is infinite,
2272
- this effectively lays the box out at its <a>max-content size</a> .
2273
- However, any of its table cells or <a>flex items</a> that are <a>block containers</a>
2274
- are laid out assuming infinite <a>available inline space</a>
2275
- and so behave accordingly.
2273
+ a table or <a>flex container</a> establishing an <a>orthogonal flow</a>
2274
+ is laid out into its given <a>available space</a> .
2275
+ However, if its <a>available inline space</a> is infinite
2276
+ (as it when placed into a [=block formatting context=] ),
2277
+ then assuming no intervening [=scroll container=] ,
2278
+ this effectively lays the box out at its <a>max-content size</a> ,
2279
+ clamped by the [=initial containing block=] ’s size,
2280
+ ensuring that its [=inline size=] still fits within the viewport or page area.
2276
2281
</div>
2277
2282
2283
+ Note: If the [=automatic inline size=] is a [=fit-content=] size
2284
+ (for example, in a [=grid item=] )
2285
+ this can apply multiple maximum constraints on the [=max-content=] size.
2286
+
2287
+ Note: <strong> This can result in T-shaped documents</strong>
2288
+ if the orthogonal content is too long to fit within its containing block.
2289
+
2278
2290
<h4 id="orthogonal-pagination">
2279
2291
Fragmenting Orthogonal Flows</h4>
2280
2292
@@ -2812,6 +2824,12 @@ Changes since the <a href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-201
2812
2824
2019 CSS Writing Modes Module Level 4 Candidate Recommendation</a></h3>
2813
2825
2814
2826
<ul>
2827
+ <li> Changed the automatic sizing of orthogonal flows that are not [=block containers=]
2828
+ to apply the [=initial containing block=] size as a constraint on the flow itself
2829
+ like [=block containers=] do,
2830
+ rather than passing through an infinite available size
2831
+ to be clamped by descendant [=block containers=] .
2832
+ (<a href="https://github.com/w3c/csswg-drafts/issues/4221">Issue 4221</a> )
2815
2833
<li> Specified that a ''display: none'' <{body}> element does not influence the [=principal writing mode=] .
2816
2834
(<a href="https://github.com/w3c/csswg-drafts/issues/3779">Issue 3779</a> )
2817
2835
<li> Updated “Applies to” line for 'text-combine-upright' to mention text
0 commit comments