[flex] Avoid overflow of flexbox with non-zero flex-factors.

bfgeek · chromium-wpt-export-bot · commit 23be5f0801ec · 2025-11-11T08:04:15.000-08:00
Lets say we have three-items with flex-factors of A, B, C. Previously in flexbox we divided up the free-space within LineFlexer (effectively) by performing: - A/(A+B+C) - B/(A+B+C) - C/(A+B+C) This approach can lead to overflow/underflow of the flexing which isn't ideal. Instead we can iteratively reduce the free-space within the loop, and multiply by the what share each item should receive of the *remaining* free-space. E.g. - C/(A+B+C) - B/(A+B) - A/(A) This means that there isn't any overflow/underflow of the free-space. Fixed: 40804774 Change-Id: I1c8e311c6e80deebd3735eae439a71e720877545 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7139011 Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1543117}
diff --git a/css/css-flexbox/flex-rounding.html b/css/css-flexbox/flex-rounding.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="help" href="https://issues.chromium.org/issues/40804774">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body { margin: 0; }
+#flex {
+  display: flex;
+  width: 55px;
+}
+#flex > div {
+  flex-grow: 1;
+}
+</style>
+<div id="flex">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div id="last"></div>
+</div>
+<script>
+test(function() {
+  assert_true(last.getBoundingClientRect().right <= flex.getBoundingClientRect().right);
+}, 'The last item shouldn\'t overflow the flexbox.');
+</script>
