Fix wrapping when a max main size style is present (#694)

DioxusLabs · Jul 16, 2024 · 3bc35ec · 3bc35ec
1 parent 25571b5
commit 3bc35ec
Show file tree

Hide file tree

Showing 4 changed files with 1,532 additions and 1 deletion.
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
@@ -815,7 +815,18 @@ fn collect_flex_lines<'a>(
         lines.push(FlexLine { items: flex_items.as_mut_slice(), cross_size: 0.0, offset_cross: 0.0 });
         lines
     } else {
-        match available_space.main(constants.dir) {
+        let main_axis_available_space = match constants.max_size.main(constants.dir) {
+            Some(max_size) => AvailableSpace::Definite(
+                available_space
+                    .main(constants.dir)
+                    .into_option()
+                    .unwrap_or(max_size)
+                    .maybe_max(constants.min_size.main(constants.dir)),
+            ),
+            None => available_space.main(constants.dir),
+        };
+
+        match main_axis_available_space {
             // If we're sizing under a max-content constraint then the flex items will never wrap
             // (at least for now - future extensions to the CSS spec may add provisions for forced wrap points)
             AvailableSpace::MaxContent => {

diff --git a/test_fixtures/flex/multiline_column_max_height.html b/test_fixtures/flex/multiline_column_max_height.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
+  <meta name="wpt-test-port" value="css/css-flexbox/multiline-column-max-height.html" />
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div id="test-root" style="display: flex; flex-flow: column wrap; max-height: 200px;">
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+  <div style="height: 20px; width: 40px; flex-shrink: 0;"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/flex/mod.rs b/tests/generated/flex/mod.rs