JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container pink">
    <div class="another-container">
        <p>content</p>
        
        <p>content</p>
        <p>content</p>

        <p>content</p>
           <p>content</p><p>content</p>
        <p>content</p>
        
        <div class="buttons">
            <button>ok</button>
            <button>cancel</button>
        </div>
    </div>    
</div>

<div class="container tomato">
    <div class="another-container">
        <p>content</p>        
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>        
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>        
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>        
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        
        <div class="buttons">
            <button>ok</button>
            <button>cancel</button>
        </div>
    </div>    
</div>

CSS

body, html {height:100%; margin:0;}

* {box-sizing: border-box;}
.container{
    height: 200px;
    position: relative;
    overflow:auto;
    margin-bottom:20px;
    
}
p {margin:0;}

.buttons{
    position: absolute;
    bottom:0;
}

.pink{
    background: pink;
}

.tomato{
    background: tomato;
}
.another-container {
    min-height:200px;
    position: relative;
    padding-bottom:30px;
}