JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="context">
        <!--<div>ceci est le contexte (la page ou le conteneur)</div>-->
        <div id="container">
            <!--<div>Conteneur pour notre contenu à hauteur fixe alligné en bas</div>-->
            <table id="table">
                <tr>
                    <td style="vertical-align: bottom">
                        <div id="fixedHeight">
                            <div id="naturalHeight">
                            <!-- on peut ajouter ce que l'on veut dans ce div -->
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere, purus et mollis luctus, sem magna egestas turpis, a mattis enim ligula in arcu. In hac habitasse platea dictumst. Sed dapibus lacus in felis dapibus, vel ultricies orci rutrum. Mauris porttitor mauris sed diam tincidunt, id rhoncus est posuere. Ut nec augue sed ligula tempus tempor. Suspendisse arcu velit, feugiat eget vehicula vitae, tincidunt eget justo. Praesent id gravida tellus, in ultrices enim. Integer ut dapibus diam, at suscipit risus. Nulla facilisi. Etiam ipsum neque, tincidunt eu pretium vel, accumsan ut magna. Vestibulum et interdum augue, vel mollis velit.</div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>

CSS

#context {
    height:300px;/* valeur arbitraire, dans mon cas effectif, j'utilise 100% */
    width:50%;/* pas d'utilité particulière, si ce n'est l'esthétique de l'exemple */
    margin:50px;/* pas d'utilité particulière, si ce n'est l'esthétique de l'exemple */
    background: lightblue;
}
#container{
    background:lightgreen;
    height:100%;/* On prends tout l'espace disponible */
}
#table{
    height:100%;
    width:100%;
    max-height: 100%;
    max-width: 100%;
}
#table td{
    padding:0;/* ainsi la cellule ne mange pas d'espace et reste vraiment invisible*/
}
#fixedHeight {
    overflow: auto; /*la barre de défilement apparait quand le contenu est plus grand que le contenant */
    height: 0; /* hauteur initiale, sera mise à jour par le javascript */
    background:beige;
}

JavaScript

var setHeight = function () {
    var f = $("#fixedHeight");
    var container = $("#context")[0];
    var availlableSpace = container.clientHeight;
    var contentHeight = $(f.children().first()).outerHeight();
    var fixedHeight = availlableSpace > contentHeight ? contentHeight : availlableSpace;
    f.css("height", fixedHeight);
    if (availlableSpace < contentHeight) {
        f[0].scrollTop = contentHeight - availlableSpace;
    }
};

$("#context").resizable()
    .resize(setHeight);
setHeight();