I am creating a table using flexbox. It has fixed headers and scrollable body.On Windows, When scrollbar is added into body using overflow-y: auto, left alignment gets broken between header and rows. Because on windows, scrollbar is taking some extra space from body but header is still getting same space. Is there any way I can make header width compress when scrollbar is added into body?
I want to make sure width of header and body is same when scrollbar is present and even when it is not.
&__item, &--header__item { position: relative; flex-basis: 20%; flex-grow: 1; overflow: hidden; text-overflow: ellipsis;&.sm, &.lg { flex-grow: 0; }&.sm { flex-basis: 40px; } }<!-- Header HTML --><ul class="table-list-container"><li class="table-list-row"><ul class="table-list header"><li class="table-list--header__item sm text-center"></li><li class="table-list--header__item md-padding-left-10"> Header 1</li><li class="table-list--header__item"> Header 2</li><li class="table-list--header__item"> Header 3</li><li class="table-list--header__item text-center"> Header 4</li></ul></li></ul><!-- Body HTML --><div style="height: 305px" class="scrollable"><ul class="table-list-container"><li class="table-list-row"><ul class="table-list body"><li class="table-list__item sm text-center"><input type="checkbox"></li><li class="table-list__item md-padding-left-10">Data</li><li class="table-list__item">Data</li><li class="table-list__item">Data</li><li class="table-list__item text-center">Data</li></ul></li></ul></div>