Horizontal scrollbar reaches end but last table column is still not visible (Flex layout + scroll container)

I have a page layout with a fixed left panel and a right content area that contains a scrollable table.

The issue is:

The horizontal scrollbar reaches the far right

But one more column is still not visible

When I decrease browser zoom, the missing column suddenly appears

So the column is rendered, but it does not fit within the scrollable area

This makes it feel like the table width is larger than the scroll container, but scrolling still doesn’t reveal the full content.

Layout Structure(parent)

<div class="logs-page"> <div class="logs-left-panel"></div> <div class="logs-right-panel"> <div class="logs-search-bar"></div> <div class="logs-histogram"></div> <div class="logs-table"> <log-table></log-table> </div> </div> </div>

Parent css

.logs-page { display: flex; width: 100%; height: 100vh; } .logs-left-panel { width: 280px; min-width: 280px; border-right: 1px solid #e5e7eb; overflow-y: auto; } .logs-right-panel { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; min-width: 0; min-height: 0; overflow: hidden; } .logs-table { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }

child (Table Wrapper)

<div class="table-scroll-wrapper"> <custom-table> <!-- dynamic columns --> </custom-table> </div> .table-scroll-wrapper { height: calc(100vh - 260px); overflow: scroll; padding: 4px; width: auto;enter image description hereenter image description here } .table-scroll-wrapper > custom-table { min-width: max-content; }