JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item">
<div class="item__top">
Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br> Верх
<br>...
CSS
.item {
box-shadow: 0 0 20PX 0 #999;
border-radius: 15PX;
display: flex;
flex-direction: column;
max-height: calc(100VH - 30PX);
}
.item__top {
flex: 1 1 auto;
border-radius: 15PX;
padding: 10px;
background: #fff;
position: relative;
overflow-y: auto;
z-index: 1;
}
.item__bottom {
flex: 0 0 auto;
padding: 25PX 10PX 10PX 10px;
margin-top: -15px;
border-radius: 0 0 15PX 15PX;
color: #fff;
background: linear-gradient(to top, blue, red)
}
body {
margin: 15PX;
background: #fff
}