layout example 3

by ShaCP

HTML

<div id="nav">
Something
</div>
<div id="overflow">
<div id="table">
Content that causes overflow
Content that causes overflow
</div>
</div>

CSS

body {
  margin: 0;
}
#nav {
  border: 1px solid;
  background-color: lightskyblue;
  text-align: center;
  font-size: 5em;
}

#table {
  font-size: 25em;
}

#overflow {
    overflow: auto;
    height: 100vh;
}

JavaScript

const elements = [...document.querySelectorAll("*")]
elements.forEach(e => console.log(e.clientWidth))