JSFiddle - React, Tailwind, and code Playground
HTML
<div id="matrix-container">
<div class="matrix-row">
<div class="matrix-cell"><div class="matrix-cell-content">1x1azbydtauzbdtiuatyz dbiuytbiu qdsytbiazuytbdiu qtdb iutybdisuyb tqsiudyt bqiusdtbi qustydbiuqtydbiu qytdb iuqytdbiuyt biuytazi udytbiqusytd biu ybtaziudytb qisuy bdtiuaztybd iuqstydbiu atyzbdiuytbqs diuy tazbiud ytbqsdz</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">1x2</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">1x3</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">1x4</div></div>
</div>
<div class="matrix-row">
<div class="matrix-cell"><div class="matrix-cell-content">2x1</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">2x2</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">2x3</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">2x4</div></div>
</div>
<div class="matrix-row">
<div class="matrix-cell"><div class="matrix-cell-content">3x1</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">3x2</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">3x3</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">3x4</div></div>
</div>
<div class="matrix-row">
<div class="matrix-cell"><div class="matrix-cell-content">4x1</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">4x2</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">4x3</div></div>
<div class="matrix-cell"><div class="matrix-cell-content">4x4</div></div>
</div>
</div>
CSS
html, body {
margin: 0;
height: 100%;
}
#matrix-container {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.matrix-row {
display: table-row;
}
.matrix-cell {
position: relative;
display: table-cell;
border: 1px solid grey;
}
.matrix-cell-content {
overflow: auto;
position: absolute;
width: 100%;
height: 100%;
}