I found the culprit following the advice of @Kosh by creating a minimal example myself.

The template came with a few wrapper classes such as .wrapper and .wrapper-table-row that has either display:table or display:table-row.

I removed those exact rules and overflow:auto on parent div is now working and the table is now fitting inside viewport.

I'm not sure but would it break the template and other layouts of the site if I remove them? What do these rules do?

.wrapper {
  display:table;
  height:100%;
  width:100%;
}
.wrapper-table-row {
  display:table-row;
  height:100%;
}

Fitting the element to be 100% in height?