Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flex-minimum-size-single-axis-scroll-container.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Flexbox: automatic minimum size for flex items respects single-axis scroll containers</title>
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style>
.flex {
display: flex;
align-items: flex-start;
}
.row {
flex-direction: row;
width: 0;
}
.column {
flex-direction: column;
height: 0;
}
.content {
width: 100px;
height: 100px;
}
.x-scroller {
overflow-x: hidden;
overflow-y: clip;
}
.y-scroller {
overflow-x: clip;
overflow-y: hidden;
}
</style>
<p>
Within a flex container, a flex item normally has an automatic minimum size
that is equal to its min-content size. (100px x 100px, for our example)
However, for the main axis, if the flex item has a scrollable overflow value
in that axis, the automatic minimum size is set to zero for that axis.
</p>
<div class="flex row">
<div class="item x-scroller" data-expected-width="0" data-expected-height="100">
<div class="content"></div>
</div>
<div class="item y-scroller" data-expected-width="100" data-expected-height="100">
<div class="content"></div>
</div>
</div>
<div class="flex column">
<div class="item y-scroller" data-expected-width="100" data-expected-height="0">
<div class="content"></div>
</div>
<div class="item x-scroller" data-expected-width="100" data-expected-height="100">
<div class="content"></div>
</div>
</div>
<script>
checkLayout('.item');
</script>