diff --git a/resources/css/components/section-nav.css b/resources/css/components/section-nav.css
index 7a37841e..c9a2e508 100644
--- a/resources/css/components/section-nav.css
+++ b/resources/css/components/section-nav.css
@@ -15,10 +15,11 @@
  * Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
  * `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
  * `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
- * `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
- * `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
+ * this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
+ * applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
+ * direct children of the bar, never need. The picker's trigger is not one of M3's controls
  * — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
- * for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
+ * for everywhere, in body-large type (a text class on the view, `md-type-body-lg
  * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
  */
 
@@ -65,6 +66,7 @@
     }
 
     [data-md-section-nav] [data-md-tabs-bar] > li {
+        display: flex;
         min-inline-size: 0;
     }
 }
diff --git a/tests/Feature/Components/TabsTest.php b/tests/Feature/Components/TabsTest.php
index c70c32ad..3afba96d 100644
--- a/tests/Feature/Components/TabsTest.php
+++ b/tests/Feature/Components/TabsTest.php
@@ -156,7 +156,10 @@ it('draws section navigation as secondary tabs and a picker', function () {
     expect($css->declarations('[data-md-section-nav-picker]', ['@media (width >= 600px)']))
         ->toBe(['display' => 'none'])
         ->and($css->declarations('[data-md-section-nav] > nav', ['@media (width < 600px)']))
-        ->toBe(['display' => 'none']);
+        ->toBe(['display' => 'none'])
+        // Each link's list item is a flex row, so tabs.css's `li > [data-md-tab]` shares its width.
+        ->and($css->declarations('[data-md-section-nav] [data-md-tabs-bar] > li'))
+        ->toBe(['display' => 'flex', 'min-inline-size' => '0']);
 });
 
 it('marks the section whose url is the request\'s, and scrolls many sections', function () {