Vertical Scrollbar leads to horizontal scrollbar

Question

My CSS looks like this:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

Answer 1

Number 1 search result on Google for my problem (similar to OP, but not the same).

Here is a common scenario for seemingly unnecessary-horizontal-scrollbar:

You have an element, say, a table, which uses auto-sizing. If the auto-sizing is done before all the rows are added, then it will not calculate enough room for a vertical-scrollbar. Doing the resize after adding rows fixed my issue -- even then, I needed a timeout

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});