JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Overflow: Clip
    </title>
</head>
<body>
<div id="target" style="width: 100px; height: 100px; background: black; overflow: scroll;">
  <div style="width: 300px; height: 300px; background: green; color: white;">
    <br />
    Line 1<br />
    Line 2: abcdefghijklmnopqrstuvwxyz<br />
    Line 3<br />
    Line 4<br />
    Line 5<br />
    Line 6<br />
    Line 7<br />
    Line 8<br />
  </div>
</div>
<script>
console.log(target.scrollWidth);
console.log(target.scrollHeight);
</script>

</body>
</html>

CSS

body {background: black;}
#target {
 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
}