JavaScript divとdivを重ね合わせてはみ出たpxを取得したい

Question

赤色のdivから青色(id:area)のdivが何pxはみ出してるか取得したいです
恐らく
canv = viewY + area.clientHeight - area.clientHeight;
canvasY = canvasY - canv;
の計算式が間違ってると思いますが、どうやったらはみ出してる分のpxを取得できるでしょうか？

<script>
window.onload = function() {
  div = document.createElement("div");
  div.id = "div";
  div.style.width = "100%";
  div.style.height = "100%";
  div.style.position = "relative";
  div.style.background = "red";
  document.body.appendChild(div);

  area = document.createElement("div");
  area.id = "area";
  area.style.width = "100%";
  area.style.height = "400px";
  area.style.position = "absolute";
  area.style.left = "0%";
  area.style.top = "300px";
  area.style.background = "rgba(44, 130, 201, 0.8)";
  document.getElementById('div').appendChild(area);

  area = document.getElementById('area');
  rect = area.getBoundingClientRect();
  viewY = event.clientY - rect.top;
  scaleHeight = div.clientHeight / div.height;
  canvasY = Math.floor(viewY / scaleHeight);
  canv = viewY + area.clientHeight - area.clientHeight;
  canvasY = canvasY - canv;
  alert("赤色のボックスから青色のボックスは" + canvasY + "pxはみ出ている");
}
</script>

Answer 1

  [t1,b1]=[div.getBoundingClientRect().top,div.getBoundingClientRect().bottom];
  [t2,b2]=[area.getBoundingClientRect().top,area.getBoundingClientRect().bottom];
  console.log([t1,b1,t2,b2]);

上記t1<t2 && b1<b2ならb2-b1はみ出ています
場合分けを色々検討してみてください