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-grid/grid-items/grid-item-minimum-size-single-axis-scroll-container.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Grid: automatic minimum size for grid 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>
.grid {
display: grid;
}
.column {
grid-template-columns: auto auto;
grid-template-rows: 100px;
width: 0;
}
.row {
grid-auto-flow: column;
grid-template-columns: 100px;
grid-template-rows: auto auto;
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 grid container, a grid item normally has an automatic minimum size
that is equal to its min-content size. (100px x 100px, for our example)
However, for a grid axis, if the grid item has a scrollable overflow value in
that axis, the automatic minimum size is set to zero for that axis.
</p>
<div class="grid column">
<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="grid row">
<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>