48 lines
1.8 KiB
HTML
48 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<title>aspect-ratio flex item</title>
|
||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||
title="Part E">
|
||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||
<meta name="assert"
|
||
content="min-height is not reflected through the aspect ratio when calculating width:fit-content when laying out a column flex item for flex base size calculation.">
|
||
|
||
<style>
|
||
#reference-overlapped-red {
|
||
position: absolute;
|
||
background-color: red;
|
||
width: 100px;
|
||
height: 100px;
|
||
z-index: -1;
|
||
}
|
||
</style>
|
||
|
||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||
</p>
|
||
|
||
<div id="reference-overlapped-red"></div>
|
||
|
||
<div style="display: flex; flex-flow: column; align-items: start; height: 200px;">
|
||
<!-- flex base size for this item is 1px because case E specifies that the
|
||
flex base size is the height resulting from layout of this variant of the
|
||
element:
|
||
<div style="width: fit-content; aspect-ratio: 1/1; height: max-content;">
|
||
<div style="width: 1px;"></div>
|
||
</div>
|
||
'min-height' was removed because of this line from the spec:
|
||
"""When determining the flex base size, the item’s min and max main sizes are
|
||
ignored"""
|
||
'width:fit-content' and 'height:max-content' are from part E in the spec
|
||
section linked to above.
|
||
The resulting height is 1px, so flex base size is 1px.
|
||
flex base size of the second item is obviously 1px.
|
||
The extra 198px should be distributed evenly to the two items, with each
|
||
item's final height being 100px.
|
||
|
||
Chrome 101 and Firefox 99 both get this wrong because they make the first
|
||
item's flex base size = 100px.
|
||
-->
|
||
<div style="aspect-ratio: 1/1; background: green; min-height: 100px; flex: 1 0 auto;">
|
||
<div style="width: 1px;"></div>
|
||
</div>
|
||
<div style="flex: 1 0 1px;"></div>
|
||
</div>
|