From 078d21a4c3ef18be40f288c4dc1bbb8208f5b22b Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Sun, 28 Jun 2026 00:23:20 +0200 Subject: [PATCH] fix: Replace flex with CSS grid in container fit-height to stop chart oscillation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR #3018 (AWSUI-54814) introduced a flex column layout on .content-fit-height with a flex:1 inner wrapper to fix the table sticky scrollbar floating above the table content. Flex's sub-pixel space distribution makes the inner wrapper's content-box width oscillate by fractions of a pixel under certain conditions, which feeds back into LabelsMeasure's ResizeObserver and causes 'Maximum update depth exceeded' in legacy charts (BarChart, MixedLineBarChart, PieChart) inside fit-height containers — most visibly inside board-components BoardItem. CSS Grid with grid-template-rows: 1fr uses an integer-pixel track sizing algorithm, so the inner wrapper gets a stable integer width and the ResizeObserver feedback loop terminates after one cycle. The structural change (outer scrolling wrapper, inner padding wrapper) is preserved, so the original AWSUI-54814 sticky scrollbar fix continues to work. Bisect notes (board-components content-permutations dev page): components 3.0.836 -> CLEAN components 3.0.837 -> BROKEN (PR #3018 lands) components HEAD with Option D (CSS Grid) -> CLEAN components HEAD with min-block-size: 100% (no flex) -> STILL OSCILLATES components HEAD with flex: 1 1 auto -> STILL OSCILLATES Rel: AWSUI-62091 Rel: AWSUI-54814 (regression guard) --- src/container/styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/container/styles.scss b/src/container/styles.scss index c37e6a61aa..1041a712dc 100644 --- a/src/container/styles.scss +++ b/src/container/styles.scss @@ -256,12 +256,12 @@ flex: 1; &-fit-height { overflow: auto; - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: 1fr; } } .content-inner { - flex: 1; + min-block-size: 0; &.with-paddings { padding-block: awsui.$space-scaled-l;