Transfer final flex sizes through aspect ratios

render-repros/checks.json

@@ -83,6 +83,12 @@
     {"name": "invalid shorthand does not partially mutate", "color": "#d6336c", "x": 200, "y": 160, "width": 100, "height": 40},
     {"name": "CSS supports accepts only the shorthand grammar", "color": "#18723a", "x": 400, "y": 120, "width": 180, "height": 40}
   ],
+  "flex-post-ratio-cross-size": [
+    {"name": "absolute visual survives the ratio-sized overflow clip", "color": "#2f9e44", "x": 0, "y": 0, "width": 520, "height": 296},
+    {"name": "final flex width sizes the media cross axis", "color": "#7048e8", "x": 0, "y": 296, "width": 520, "height": 6},
+    {"name": "sibling receives the other flexible share", "color": "#1971c2", "x": 560, "y": 0, "width": 340, "height": 150},
+    {"name": "following content starts after ratio height and column gap", "color": "#e8590c", "x": 0, "y": 452, "width": 900, "height": 20}
+  ],
   "flex-whitespace-items": [
     {"name": "direct flex sidebar starts at container edge", "color": "#1971c2", "x": 0, "y": 0, "width": 225, "height": 180},
     {"name": "direct flex body keeps its intended inset", "color": "#2b8a3e", "x": 225, "y": 0, "width": 675, "height": 200},

render-repros/flex-post-ratio-cross-size.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  html, body { margin: 0; width: 1080px; background: #030712; }
+  #stack {
+    display: flex;
+    flex-flow: column;
+    gap: 150px;
+    width: 1080px;
+    overflow: hidden;
+  }
+  #row {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    gap: 40px;
+    width: 1080px;
+    height: min-content;
+    overflow: hidden;
+  }
+  #media {
+    flex: 1 0 0;
+    width: 1px;
+    height: auto;
+    aspect-ratio: 1.72;
+    position: relative;
+    overflow: hidden;
+    background: #7048e8;
+  }
+  #visual {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1.75571;
+    background: #2f9e44;
+  }
+  #copy {
+    flex: 1 0 0;
+    width: 1px;
+    height: 150px;
+    background: #1971c2;
+  }
+  #after { width: 1080px; height: 20px; background: #e8590c; }
+</style>
+<div id="stack">
+  <div id="row">
+    <div id="media"><div id="visual"></div></div>
+    <div id="copy"></div>
+  </div>
+  <div id="after"></div>
+</div>