S-table expands to fill all available parent height due to shadow DOM block-size: 100%

Polaris
1

When using s-table inside s-page (which uses a grid layout with main content + aside), the table expands vertically to fill all remaining space in the parent container instead of sizing to its content.

Expected behavior

s-table should size to its content height, matching the behavior of other web components like s-section, s-box, s-text, etc.

Actual behavior

The table stretches vertically to fill all available parent height, leaving a large empty gap below the table rows.

Root cause

Inside s-table’s shadow DOM, the .scroll container has block-size: 100%:

.scroll {
    block-size: 100%;
    inline-size: 100%;
}

When s-table is placed inside a grid/flex parent (like s-page’s main content area), the host element stretches to fill available space, and block-size: 100% on .scroll resolves to that stretched height rather than the content height.

Minimal reproduction

<s-page heading="Dashboard">
  <!-- Some content above -->
  <s-section>
    <s-text>This section sizes to content correctly.</s-text>
  </s-section>

  <!-- This table expands to fill all remaining height -->
  <s-section padding="none">
    <s-table>
      <s-table-header-row>
        <s-table-header>Name</s-table-header>
        <s-table-header format="numeric">Value</s-table-header>
      </s-table-header-row>
      <s-table-body>
        <s-table-row>
          <s-table-cell>Location A</s-table-cell>
          <s-table-cell>100</s-table-cell>
        </s-table-row>
        <s-table-row>
          <s-table-cell>Location B</s-table-cell>
          <s-table-cell>200</s-table-cell>
        </s-table-row>
      </s-table-body>
    </s-table>
  </s-section>

  <s-box slot="aside">
    <!-- Sidebar content taller than main content triggers the issue -->
    <s-section heading="Sidebar">
      <s-text>Tall sidebar content here...</s-text>
    </s-section>
  </s-box>
</s-page>

Workarounds attempted (none worked)

  • style=“max-block-size: max-content; overflow: clip” on s-table
  • style=“block-size: fit-content” on s-table
  • Wrapping in s-box or div with align-self: start
  • Wrapping in div with height: fit-content; overflow: hidden

Since .scroll is in the shadow DOM, we can’t override it from outside.

Suggested fix

Change block-size: 100% to block-size: fit-content (or max-content) on the .scroll container inside s-table’s shadow DOM.

2

Update: This reproduces with Shopify’s own example code from the docs.

I copied the exact JSX from the Index pattern template — the “Puzzles” example with empty state + table — into a fresh page with no sidebar, no custom layout, no additional styling. Just s-page > s-section > s-table, exactly as documented.

Same result: the table section expands to fill all remaining viewport height, leaving a large empty gap below the last row (see screenshot).

This confirms the issue is in s-table itself, not related to sidebar grid layouts or any app-specific code. The .scroll container in s-table’s shadow DOM has block-size: 100%, which resolves against the stretched parent rather than the content height.

Screenshot 2026-02-17 at 09.04.41
Screenshot 2026-02-17 at 09.04.412624Ă—2184 169 KB

3

Update: Did some more debugging with help from the community

Finding: @shopify/polaris CSS is a trigger.

Our app is a hybrid - Polaris Web Components for the dashboard, but we still load @shopify/polaris React (and its CSS) for other pages. When I commented out import "@shopify/polaris/build/esm/styles.css" from our entry point, the sandbox test page with s-table + sidebar worked perfectly - tables sized to content.

However, our actual dashboard page (which has @shopify/polaris-viz charts and other React components alongside web components) still had the expansion bug even without Polaris CSS. So it’s not the only factor.

Another developer with a pure web components app (no @shopify/polaris at all) tested the exact same sandbox code and had no issues - both tables sized to content without any workarounds.

Reliable workaround: Wrapping the table’s s-section in s-stack fixes it in all scenarios:

<s-stack>
  <s-section padding="none">
    <s-table>...</s-table>
  </s-section>
</s-stack>

s-stack breaks the height inheritance chain so .scroll { block-size: 100% } resolves against content height instead of the stretched grid parent.

This seems relevant for anyone migrating incrementally from Polaris React to web components - the two don’t play nicely together around s-table height calculations.

2 Likes