Skip to content

Commit 44cc568

Browse files
committed
[css-sizing-4] Add min-width:auto aspect ratio example from #4637
1 parent 21aa620 commit 44cc568

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

css-sizing-4/Overview.bs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,24 @@ Automatic Content-based Minimum Sizes</h4>
412412
</pre>
413413
</div>
414414

415+
<div class="example">
416+
This automatic minimum operates in both axes.
417+
Consider this example:
418+
<pre>
419+
&lt;div style="height: 100px; aspect-ratio: 1/1;">
420+
&lt;span style="display: inline-block; width: 50px;">&lt;/span>
421+
&lt;span style="display: inline-block; width: 150px;">&lt;/span>
422+
&lt;/div>
423+
</pre>
415424

425+
The 'width' of the container, being ''width/auto'',
426+
resolves through the aspect ratio to 100px.
427+
However, its 'min-width', being ''min-width/auto'',
428+
resolves to 150px.
429+
The resulting width of the container is thus 150px.
430+
To ignore the contents when sizing the container,
431+
''min-width: 0'' can be specified.
432+
</div>
416433

417434
<!--
418435
████ ██ ██ ████████ ████████ ████ ██ ██ ██████ ████ ██████

0 commit comments

Comments
 (0)