@@ -1031,6 +1031,13 @@
 	overflow-wrap: anywhere;
 	word-break: break-word;
 }
+/* Registered as a length so api-examples-balance.ts reads the 16-line cap in pixels. */
+@property --api-code-cap {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0px;
+}
+
 .api-page-intro,
 #elastic-api-v3,
 #schema-definition,
@@ -2964,7 +2971,7 @@ button.example-response-tab:focus-visible {
 	}
 
 	.api-page-grid {
-		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
+		grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
 		grid-template-rows: auto auto;
 	}
 
@@ -2985,8 +2992,9 @@ button.example-response-tab:focus-visible {
 		min-width: 0;
 		padding-top: 16px;
 		padding-bottom: 48px;
-		/* Stays in view while the sections scroll, however long the page is. The rail itself does not clip, so the
-		   Copy page menu can open past its edge; the examples below it shrink to the window and scroll. */
+		/* Stays in view while the sections scroll and never scrolls itself. api-examples-balance.ts reads this
+		   max-height to share the room left under the chips and captions between the request and the response
+		   code. It does not clip, so the Copy page menu can open past its edge. */
 		position: sticky;
 		top: var(--offset-top, 0px);
 		align-self: start;
@@ -2995,9 +3003,14 @@ button.example-response-tab:focus-visible {
 	}
 
 	.api-page-rail > :not(.api-page-actions) {
+		flex: 0 0 auto;
+	}
+
+	/* Scrolls only in a window too short for the chips, headers and captions alone. */
+	.api-page-rail > #api-examples-panel {
 		flex: 0 1 auto;
 		min-height: 0;
-		overflow: hidden auto;
+		overflow-y: auto;
 	}
 
 	.api-page-rail > .api-page-actions {
@@ -3994,15 +4007,14 @@ html:has(.api-page-shell) {
 	overflow: auto;
 }
 
-/* Beside the article the rail is sticky and as tall as the window, so the response fills what is left under
-   the request instead of stopping at 12 lines. 26rem is the rail's padding, Copy page and the request
-   above the response. The 12-line cap stays as the minimum. */
+/* Beside the article api-examples-balance.ts sets both heights from the room left in the rail. */
 @media (min-width: 1024px) {
+	#api-examples-panel .api-code-carousel-card-body {
+		max-height: var(--api-request-code-max, var(--api-code-cap));
+	}
+
 	#api-examples-panel .example-block-body {
-		max-height: max(
-			var(--api-response-cap),
-			calc(100dvh - var(--offset-top, 0px) - 26rem)
-		);
+		max-height: var(--api-response-code-max, var(--api-response-cap));
 	}
 }
 
 
@@ -4,6 +4,7 @@
  * for both OperationView and SchemaView pages.
  */
 import { decorateApiCodeTokens } from './api-code-tokens'
+import { initExamplesBalance } from './api-examples-balance'
 import { initApiExamples, syncDescriptions } from './api-examples-carousel'
 import { fitParamSummaries } from './api-param-summary'
 import { initUnionChips, revealVariantsAround } from './api-union-chips'
@@ -763,6 +764,7 @@ export function initApiDocs(): void {
     initApiPropertyAnchorCopy()
     initApiResponseStatusTabs()
     initApiExamples()
+    initExamplesBalance()
     initUnionChips()
     initApiPageActions()
     initExamplesRailSteadying()
 
@@ -0,0 +1,210 @@
+import { balanceCodeHeights, initExamplesBalance } from './api-examples-balance'
+
+const floor = 112
+
+describe('balanceCodeHeights', () => {
+    it('shows both in full when they fit', () => {
+        expect(
+            balanceCodeHeights(500, { request: 200, response: 100 }, floor)
+        ).toEqual({ request: 200, response: 100 })
+    })
+
+    it('gives a one-line response its full height and the rest to the request', () => {
+        expect(
+            balanceCodeHeights(300, { request: 360, response: 24 }, floor)
+        ).toEqual({ request: 276, response: 24 })
+    })
+
+    it('gives a short request its full height and the rest to the response', () => {
+        expect(
+            balanceCodeHeights(400, { request: 120, response: 4644 }, floor)
+        ).toEqual({ request: 120, response: 280 })
+    })
+
+    it('splits the room evenly between two long samples', () => {
+        expect(
+            balanceCodeHeights(400, { request: 360, response: 4644 }, floor)
+        ).toEqual({ request: 200, response: 200 })
+    })
+
+    it('keeps five lines of each when the window is too short', () => {
+        expect(
+            balanceCodeHeights(-50, { request: 360, response: 4644 }, floor)
+        ).toEqual({ request: 112, response: 112 })
+    })
+
+    it('never grows a sample past its own height to reach the floor', () => {
+        expect(
+            balanceCodeHeights(0, { request: 360, response: 42 }, floor)
+        ).toEqual({ request: 112, response: 42 })
+    })
+})
+
+interface Sample {
+    lang: string
+    scroll: number
+    offset?: number
+}
+
+function measure(
+    element: Element | null,
+    sizes: {
+        height?: number
+        scroll?: number
+        offset?: number
+        client?: number
+    }
+) {
+    if (!element) throw new Error('missing element')
+    const height = sizes.height ?? 0
+    element.getBoundingClientRect = () =>
+        ({ top: 0, bottom: height, height }) as DOMRect
+    for (const [key, value] of [
+        ['scrollHeight', sizes.scroll],
+        ['offsetHeight', sizes.offset ?? sizes.scroll],
+        ['clientHeight', sizes.client ?? sizes.scroll],
+    ] as const)
+        if (value !== undefined)
+            Object.defineProperty(element, key, { configurable: true, value })
+}
+
+/**
+ * Around the code there are 202px: the rail's 100px outside the panel, and 102px in the panel outside the strip's
+ * code and the response body. So the code gets the rail's max-height minus 302px.
+ */
+function rail(maxHeight: number, samples: Sample[], response: Sample) {
+    const cards = samples
+        .map(
+            ({ lang }, i) =>
+                `<section class="api-code-carousel-card${i === 0 ? ' is-active' : ''}" data-lang="${lang}"><header></header><div class="api-code-carousel-card-body"></div></section>`
+        )
+        .join('')
+    const host = document.createElement('div')
+    host.innerHTML = `
+        <div class="api-page-rail" style="max-height: ${maxHeight}px">
+            <div id="api-examples-panel" style="--api-code-cap: 360px">
+                <div data-api-examples>
+                    <div data-api-carousel><div data-carousel-strip>${cards}</div></div>
+                    <div class="example-block--response"><div class="example-block-body"></div></div>
+                </div>
+            </div>
+        </div>`
+    const root = host.firstElementChild as HTMLElement
+    document.body.append(root)
+    measure(root, { height: 600 })
+    measure(root.querySelector('#api-examples-panel'), { height: 500 })
+    measure(root.querySelector('[data-api-examples]'), { height: 500 })
+    measure(root.querySelector('[data-carousel-strip]'), { height: 200 })
+    root.querySelectorAll('.api-code-carousel-card-body').forEach((body, i) =>
+        measure(body, samples[i])
+    )
+    measure(root.querySelector('.example-block-body'), {
+        ...response,
+        height: 100,
+    })
+    return root
+}
+
+function heights(root: HTMLElement) {
+    const panel = root.querySelector<HTMLElement>('#api-examples-panel')!
+    return {
+        request: panel.style.getPropertyValue('--api-request-code-max'),
+        response: panel.style.getPropertyValue('--api-response-code-max'),
+    }
+}
+
+const longResponse = { lang: 'JSON', scroll: 4644 }
+
+describe('initExamplesBalance', () => {
+    beforeEach(() => {
+        vi.stubGlobal('matchMedia', () => ({ matches: true }))
+        vi.stubGlobal('requestAnimationFrame', (run: FrameRequestCallback) => {
+            run(0)
+            return 1
+        })
+        vi.stubGlobal('cancelAnimationFrame', () => {})
+        vi.stubGlobal(
+            'ResizeObserver',
+            class {
+                observe() {}
+                disconnect() {}
+            }
+        )
+    })
+
+    afterEach(() => {
+        document.body.replaceChildren()
+        vi.unstubAllGlobals()
+    })
+
+    it('gives the code the room a taller window adds', () => {
+        const root = rail(602, [{ lang: 'Console', scroll: 400 }], longResponse)
+        initExamplesBalance()
+        const before = heights(root)
+
+        root.style.maxHeight = '1002px'
+        window.dispatchEvent(new Event('resize'))
+
+        expect([before, heights(root)]).toEqual([
+            { request: '150px', response: '150px' },
+            { request: '350px', response: '350px' },
+        ])
+    })
+
+    it('re-balances when a longer language becomes active', async () => {
+        const root = rail(
+            1302,
+            [
+                { lang: 'Console', scroll: 100 },
+                { lang: 'Java', scroll: 300 },
+            ],
+            { lang: 'JSON', scroll: 50 }
+        )
+        initExamplesBalance()
+        const before = heights(root)
+
+        const [consoleCard, javaCard] = root.querySelectorAll(
+            '.api-code-carousel-card'
+        )
+        consoleCard.classList.remove('is-active')
+        javaCard.classList.add('is-active')
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect([before, heights(root)]).toEqual([
+            { request: '100px', response: '50px' },
+            { request: '300px', response: '50px' },
+        ])
+    })
+
+    it('counts a horizontal scrollbar in a short response', () => {
+        const root = rail(1302, [{ lang: 'Console', scroll: 100 }], {
+            lang: 'JSON',
+            scroll: 40,
+            offset: 48,
+        })
+        initExamplesBalance()
+
+        expect(heights(root)).toEqual({ request: '100px', response: '48px' })
+    })
+
+    it('stops balancing a panel once HTMX has swapped it out', () => {
+        const old = rail(602, [{ lang: 'Console', scroll: 400 }], longResponse)
+        initExamplesBalance()
+        old.remove()
+        const current = rail(
+            602,
+            [{ lang: 'Console', scroll: 400 }],
+            longResponse
+        )
+        initExamplesBalance()
+
+        old.style.maxHeight = '1002px'
+        current.style.maxHeight = '1002px'
+        window.dispatchEvent(new Event('resize'))
+
+        expect([heights(old), heights(current)]).toEqual([
+            { request: '150px', response: '150px' },
+            { request: '350px', response: '350px' },
+        ])
+    })
+})