Blitz - WPT: flex-minimum-size-single-axis-scroll-container.html

wpt / css / css-flexbox / flex-minimum-size-single-axis-scroll-container.html

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

Subtest	Status	Message
.item 1	PASS
.item 2	FAIL	assert_equals: data-expected-width expected 100 got 0
.item 3	PASS
.item 4	FAIL	assert_equals: data-expected-height expected 100 got 0

Enable JavaScript in test iframe

/css/css-flexbox/flex-minimum-size-single-axis-scroll-container.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>