JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="sibling">
        This is some sort of sibling which is not suspected to scroll as the other div with class "child" is supected to fill the height that is left and have a scrollbar if one is needed.
    </div>
    <div class="child">
        <div class="some-content">
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
        abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
       </div>
    </div>
</div>

CSS

div.parent {
    max-height: 300px;
    width: 200px;
    
    border: 1px solid black;
}

div.sibling {
    border: 1px solid red;
}

div.child {
    height: 100%;
    border: 1px solid blue;
    overflow-y: auto;
}