diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index 7179885ff46..3247a753c3a 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -1626,7 +1626,12 @@ impl FlexItem<'_> {
IndependentFormattingContext::NonReplaced(non_replaced) => {
let cross_size = match used_cross_size_override {
Some(s) => AuOrAuto::LengthPercentage(s),
- None => self.content_box_size.cross.map(|t| t),
+ None => self.content_box_size.cross.map(|cross_size| {
+ cross_size.clamp_between_extremums(
+ self.content_min_size.cross,
+ self.content_max_size.cross,
+ )
+ }),
};
let item_writing_mode = non_replaced.style.effective_writing_mode();
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 7f7a3ed28b2..71c9ed2611e 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -176387,6 +176387,19 @@
{}
]
],
+ "percentage-max-height-005.html": [
+ "3ca28b3ec1ecc6a204fb1177e1452ec4ce7a5c1c",
+ [
+ null,
+ [
+ [
+ "/css/reference/ref-filled-green-100px-square.xht",
+ "=="
+ ]
+ ],
+ {}
+ ]
+ ],
"percentage-padding-002.html": [
"9eaaff013ef26f557f5f883fea76b81b6031769f",
[
diff --git a/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html b/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html
new file mode 100644
index 00000000000..3ca28b3ec1e
--- /dev/null
+++ b/tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html
@@ -0,0 +1,30 @@
+
+CSS Flexbox Test: flex item with max cross size
+
+
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+