[SOLVED] Flexbox table header left alignment broken with scrollbar

Flexbox table header left alignment broken with scrollbar

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&#45;&#45;header__item sm text-center">
          </li>
          <li class="table-list&#45;&#45;header__item md-padding-left-10">
            Header 1
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 2
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 3
          </li>
          <li class="table-list&#45;&#45;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>

Solution

overflow-y: overlay;

worked for me. Since now scroll bar will take space from existing table space and not extra space, column headers and rows are perfectly aligned.

Caution: You need to make sure your last column have enough space to show its content after scrollbar is added because from that's where scrollbar is getting its space.