<!DOCTYPE html>
<link rel="author" title="David Grogan" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
title="Case E">
<meta name="assert"
content="aspect-ratio item gets correct flex base during intrinsic sizing, where a too-large flex base will cause the container to be too large." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.grandchild {
float: left;
width: 30px;
height: 200px;
}
</style>
<p>Main point of this test is that the container width is 100px, not 140px.</p>
<div
style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; outline: 1px solid; position: relative;"
data-expected-width="100">
<div
style="width: 100px; flex: 0 0 30px; min-height: 0px; background: lightblue;">
</div>
<!-- flex base size during layout for intrinsic sizing should be 60 because that's fit-content width * aspect-ratio, in case E. If flex base size is too big, then the second item will end up on the second line, causing the container to be 140px wide.
flex base size during real layout will be 50px because then the 50% will be resolvable and this will fall into case B. -->
<div
style="width: 50%; aspect-ratio: 1/1; min-height: 0px; flex: 0 0 auto; background: orange;"
data-expected-height="50">
<div class="grandchild"></div>
<div class="grandchild"></div>
</div>
<div style="width: 40px; flex: 0 0 10px; min-height: 0px; background: grey;"
data-offset-x="0">
</div>
</div>
<script>
checkLayout('body > div');
</script>
Codebase Browser
chromium