CSS Min-Width has me stuck between Box-Sizing and Overflow Scroll-Bars

Issue

I have a Grid component that has 2 divs on top of one another and each contains a table. It's the "sticky-table-header" scenario.

The bottom div can scroll vertically and gets a scroll-bar on the right.

I keep the columns in table 2 aligned with their headers in table 1 by setting padding-right equal to scroll-bar-width once the scroll bar appears.

So far everything is peachy.

BUT when I shrink the browser to below min-width (set the same for both tables and/or divs) then table 1 shrinks that little bit further as it's padding has not been taking into account.

If I set box-sizing: content-box then when they shrink it is great but now the tables width: 100% pushes the padding off the screen when the browser is fullscreen result headers misalign.

Do I have to calculate and reset min-width in table 1 to be scroll-bar-width greater than table 2 or is there a better way?

Solution

Issue arises due to the difference in how the scrollbar affects the available content space in the two divs.

Here are some solutions:

1. CSS Grid Layou

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
}

2. Overlay Scrollbar

.table-container {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

Answered By - Dump