Free Debreuil
9d3a69de4b
Automatic update from web-platform-tests Make flex/grid automatic min size support single-axis scroll container Use axis-specific overflow checks when deciding whether to collapse automatic minimum sizes for flex, grid, and aspect-ratio sizing. Scrollability in the orthogonal axis no longer suppresses the content-based minimum size. Bug: 440038212 Fixed: 478922098 Change-Id: I2037d8324dde7227ac7fa27cd0847a1b7dffc398 Cq-Do-Not-Cancel-Tryjobs: true Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7511763 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Auto-Submit: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1641645} -- wpt-commits: ff1994f3a92f96f90e356f806df883ccb6e20f32 wpt-pr: 60380
64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Flexbox: automatic minimum size for flex items respects single-axis scroll containers</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
|
|
<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>
|