Vertical scrollbar causing column width different between header and cell in spreadsheet

Vertical scrollbar causing column width different between header and cell in spreadsheet. This is a common issue when the HTML page that display on a computer. Whereas, it won't have issue if it is on Android or iOS because the scrollbar is floating on top of the content.

To explain this issue, let says we have a spreadsheet (or "table" view) built with DIV which looks like below:

<style>
.header {
  display:flex;
  flex-direction:row;
}

.item {
  display:flex;
  flex-direction:row;
}

.c1 {
  width:50%;
}

.item-list {
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}
</style>

<div class="my-table">

<div class="header">
  <div class="c1">Date</div>
  <div class="c1">Ref #</div> 
</div> 
<div class="item-list">
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0001</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0002</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0003</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0004</div>
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0005</div>
  </div>
</div>
</div>


With the CSS for item-list, a vertical scrollbar will appear once the number of items increased.

The problem with this CSS is that the date and reference number column in the header will have a different width if you compared it with the column in the items.

To solve this, you need to use this style:

(1) you have to use "sticky:

.header{
  position: sticky;
  top: 0;
  left: 0;
  background-color: white;
}

(2) Move the overflow attribute for "item-list" to "my-table":

.my-table {
  position:relative;
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}

And that solves the column width issue when there is a vertical scrollbar.