You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Abstract: This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context.
<img style="max-width: 49%;" src="images/sizing-ltr-tb.svg" alt="In left-to-right, top-to-bottom horizontal English, the horizontal width and inline size are synonymous, and vertical height and block size are synonymous."><img style="max-width: 49%;" src="images/sizing-ttb-rl.svg" alt="In top-to-bottom, right-to-left vertical Japanese, the horizontal width and block size are synonymous, and vertical height and inline size are synonymous.">
93
94
<figcaption>Whether the <a>width</a> or <a>height</a> corresponds
94
95
to an <a>inline size</a> or <a>block size</a> depends on the <a>writing mode</a>.</figcaption>
95
96
</figure>
@@ -169,10 +170,11 @@ Auto Box Sizes</h3>
169
170
(sizes resulting from ''width/auto'' sizing rules, depending on context):
170
171
171
172
<dl export>
172
-
: <dfn>stretch-fit size</dfn>
173
-
: <dfn>stretch-fit inline size</dfn>
174
-
: <dfn>stretch-fit block size</dfn>
175
-
:: The <a>size</a> a box would take
173
+
<dt><dfn>stretch-fit size</dfn>
174
+
<dt><dfn>stretch-fit inline size</dfn>
175
+
<dt><dfn>stretch-fit block size</dfn>
176
+
<dd>
177
+
The <a>size</a> a box would take
176
178
if its <a>outer size</a> filled the <a>available space</a>
177
179
in the given axis;
178
180
in other words, the <a>stretch fit</a> into the <a>available space</a>,
@@ -186,8 +188,9 @@ Auto Box Sizes</h3>
186
188
for when the <a>available space</a> is <a>indefinite</a>
0 commit comments