Skip to content

Commit 3659b69

Browse files
committed
[css-contain-3][editorial] some markup cleanup
1 parent 43a2e1d commit 3659b69

1 file changed

Lines changed: 12 additions & 10 deletions

File tree

css-contain-3/Overview.bs

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,15 @@ spec:css-sizing-4; type:property; text:contain-intrinsic-size
3131
spec:css-sizing-4; type:property; text:aspect-ratio
3232
spec:intersection-observer; type:dfn; text:intersection root
3333
spec:css-sizing-3; type:value; for:height; text:auto
34-
spec:css-sizing-3; type:property; text:width
34+
spec:css-sizing-3; type:property;
35+
text:width
36+
text:height
37+
text:min-width
38+
text:min-height
3539
spec:css-sizing-3; type:dfn; text:width
3640
spec:css-sizing-3; type:property; text:height
3741
spec:css-sizing-3; type:dfn; text:height
3842
spec:css-sizing-3; type:dfn; text:size
39-
spec:css-sizing-3; type:value; for:width; text:min-content
40-
spec:css-sizing-3; type:value; for:width; text:max-content
4143
spec:css-syntax-3; type:dfn; text:identifier
4244
spec:css-values-4; type:dfn; text:relative length
4345
spec:web-animations-1; type:dfn; text:effect values
@@ -131,10 +133,10 @@ Inline-Size Containment</h3>
131133
<div class=example>
132134
For example,
133135
the following <code>article</code> is constrained by both
134-
the overall <code>section</code> ''width'',
136+
the overall <code>section</code> '/width',
135137
and impacted by the floated <code>div</code>s.
136138

137-
<pre class=lang-css>
139+
<pre class=lang-markup>
138140
&lt;section style="width: 200px; border: solid; display: flow-root;">
139141
&lt;!-- floated elements that impact the available space -->
140142
&lt;div style="float: left; width: 50px; height: 80px; background: red;">&lt;/div>
@@ -152,20 +154,20 @@ Inline-Size Containment</h3>
152154

153155
The block layout algorithm will attempt to layout the <code>article</code>
154156
in the first available space between the first two floated <code>div</code>s.
155-
However, the <code>header</code> ''aspect-ratio''
156-
requires a space with ''height'' equal or greater to the ''width'',
157+
However, the <code>header</code> '/aspect-ratio'
158+
requires a space with '/height' equal or greater to the '/width',
157159
and the available space is 100px wide by 80px tall,
158160
so the <code>article</code> is unable to fit.
159161
As a result, the block layout algorithm moves on,
160162
and attempts to layout the <code>article</code> in the next available space.
161163

162-
Since <code>article</code> ''min-width'' depends on the ''min-ccontent'' size,
163-
it will likley be too large to fit in the 40px wide space
164+
Since <code>article</code> 'min-width' depends on the [=min-content size=],
165+
it will likely be too large to fit in the 40px wide space
164166
beside the final floated <code>div</code>,
165167
and continue to layout below that <code>div</code> as well--
166168
forming a 200px square below all the floated elements.
167169

168-
However, if the ''min-width'' is removed from the <code>article</code>,
170+
However, if the 'min-width' is removed from the <code>article</code>,
169171
or if [=inline-size containment=] is added to
170172
either the <code>article</code> or <code>header</code>,
171173
then the <code>article</code> will fit as a 40px square

0 commit comments

Comments
 (0)