JSFiddle - React, Tailwind, and code Playground

HTML

<table class="container" border="1">
  <tr class="top">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="mid">
    <td>4</td>
    <td style = " overflow:hidden;" >
        <div style = "width:100%;height:200px;overflow-y: scroll; overflow-x: hidden;">   
        <p>THIS CELL OVER HERE. I DONT WANT TO EXCEED THE 20% OF THE HEIGHT.IF THE TEXT IS BIGGER I WANT A VERTICAL SCROLLBAR.THIS CELL OVER HERE. I DONT WANT TO EXCEED THE 20% OF THE HEIGHT.IF THE TEXT IS BIGGER I WANT A VERTICAL SCROLLBAR.THIS CELL OVER HERE. I DONT WANT TO EXCEED THE 20% OF THE HEIGHT.IF THE TEXT IS BIGGER I WANT A VERTICAL SCROLLBAR.THIS CELL OVER HERE. I DONT WANT TO EXCEED THE 20% OF THE HEIGHT.IF THE TEXT IS BIGGER I WANT A VERTICAL SCROLLBAR.THIS CELL OVER HERE. I DONT WANT TO EXCEED THE 20% OF THE HEIGHT.IF THE TEXT IS BIGGER I WANT A VERTICAL SCROLLBAR  </p>
    </td>
    <td>6</td>
  </tr>
  <tr class="bot">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

CSS

html,body {
	height: 100%;
	font-family: 'sansationregular';
	font-size: 1em;
	overflow:hidden;
}
table{
	border-collapse: collapse;
	table-layout: fixed;
	white-space: normal;
    position:absolute;
}
.container{
	width:100%;
	height: 100%;
	min-height: 100%;
	
}
tr.top{
	height:40%;
	background-color: rgba(255,255,255,0.5);
}
tr.mid{
	height:20%;
}
tr.bot{
	height:40%;
}