JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Client web</h1>
<div id="app" role="application">
<div id="apptable">
<h2 id="historyH2" class="hidden">Historique</h2>
<div id="gamelog" contenteditable="true" tabindex="0" aria-labelledby="historyH2" aria readonly="true"></div>
<h2 id="menuH2" class="hidden">Menu</h2>
<div id="keytrap" class="hidden" aria-labelledby="menuH2"></div>
<div id="menuArea"></div>
<h2 id="gameH2" class="hidden">Actions</h2>
<div id="gameArea"></div>
<h2 id="tableH2" class="hidden">Table</h2>
<div id="tableArea"></div>
</div><!--apptable-->
<h2 class="hidden">Chat</h2>
<form id="chatArea" data-check="disable">
<p><label id="chatlbl" for="chat">Chat: </label>
<input type="text" id="chatBox" aria-labelledby="chatlbl" />
<button type="submit">Envoyer</button>
<span id="volsliderlbl">Volume: </span>
<span id="volslider" role="slider" tabindex="0" aria-labelledby="volsliderlbl" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">100%</span>
</p></form>
</div><!--app-->

CSS

#app {
/* Le but de ce code qui ne fait en gros rien est de faire en sorte que le positionnement de la zone chat en bas de la zone de l'application fonctionne; ça ça marche correctement.  */
position: relative;
top: 0px; left: 0px;
height: 100%;  
}
#apptable { display: table; }
#gamelog, #menuArea, #gameArea  {
display: table-cell;
height: 91%; /* ON dirait qu'il ne prend pas en compte cette hauteur, la zone s'étend à mesure que le texte arrive du serveur  */
overflow-x: hidden;
overflow-y: scroll; /* La barre de défilement n'est pas présente malgré ça ! */
}
#gamelog { width: 36%; }
#menuArea { width: 29%; }
#gameArea, #tableArea  { width: 17%; }
#chatArea {
/* La zone chat est positionnée tout en bas relativement à l'application; ça, ça fonctionne.  */
position: absolute;
width: 100%;
height: 1.5em; /* Espace à peu près suffisant pour une ligne de texte */
bottom: 0px;
}