Fix div to bottom of parent - html

Question

i have the following HTML/CSS:
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="shopping-cart-header">CART</div>
<div class="products-container">
<div class="product">
<span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
<div class="product-details">
<div class="name-header">NAME</div>
<div class="product-quantity-details">
<span class="quantity">QTY</span>
<span class="color-circle"></span>
<span class="color">COLOR</span>
</div>
<div class="price-open">
<span class="product-price">XX.XX</span>
<span class="product-link">öffnen</span>
</div>
</div>
</div>
</div>
<div class="checkout">
<div class="taxes">
<span class="label">Taxes</span>
<span class="value">0</span>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<button>Checkout</button>
</div>
</div>
</div>
</div>
CSS:
.cart-preview .body {
visibility: visible;
position: fixed;
height: 100%;
top: 0;
width: 400px;
z-index: 100;
background-color: #fff;
transition: right 1s linear;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .close{
float: left;
}
.cart-preview .body .shooping-cart-header{
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
height: 100%;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.cart-preview .body .checkout {
height: 100%;
width: 100%;
}
.product-quantity-details .quantity{
border: 2px solid black;
margin: 0 10px;
background: white;
width: 36px;
height: 36px;
font-size: 15px;
line-height: 15px;
color: black;
width: auto;
height: auto;
}
.product-quantity-details .quantity:after{
content: 'x'
}
.cart-preview .body .checkout>button {
position: absolute;
background: black;
text-align: center;
color: white;
bottom: 50px;
height: 20px;
width: 205px;
left: 25%;
}
.taxes {
position: relative;
margin-bottom: 5px;
left: 0;
}
.cart-total {
position: absolute;
bottom: 100px;
width: 100%;
}
.taxes {
position: absolute;
bottom: 300px;
width: 100%;
}
.cart-total .value {
float: right;
}
.cart-total .value:after {
content:'€'
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
.cart-preview.cart-overview {
width: 100%;
position: inherit;
}
.cart-preview.cart-overview .body {
display: block;
position: inherit;
width: 100%;
}
.cart-preview .header > :first-child {
float: left;
}
.cart-preview .header > :last-child {
float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
clear: both;
content: "\A0";
}
.cart-preview .body {
border: 1px solid #808080;
padding: 2px;
}
The JavaScript simply toggles the .open class for the body.
Now I want to stick the last div to the bottom of the body, so the product-container div is scrollable on overflow and the checkout is always visible.
However, neither the scrolling nor the chechkout divs position are working.
Could someone help me with these two things?

Answer 1

Please try this and provide feedback so, that answer can be improved more.
.cart-preview .body {
position: fixed;
height: 100%;
top: 0;
width: 400px;
z-index: 100;
background-color: #fff;
transition: right 1s linear;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
.cart-preview .body .shooping-cart-body {
font-family: 'sans-serif';
width: 100%;
text-align: center;
}
.cart-preview .body .close{
float: left;
}
.cart-preview .body .shooping-cart-header{
text-align: center;
}
.cart-preview .body .products-container {
position: relative;
max-height: 400px;
height: auto;
width: 100%;
margin-top: 15px;
overflow: auto;
}
.product {
display: flex;
}
.product>div {
width: 50%;
}
.product .prodcut-image {
margin-right: 20px;
}
.product img {
width: 100%;
height: auto;
}
.cart-preview .body .products-container>.product-image {
position: absolute;
width: 50%;
left: 0;
}
.cart-preview .body .products-container>.product-details {
position: absolute;
width: 50%;
float: right;
}
.cart-preview .body .products-container .color-circle:before {
content: ' \25CF';
font-size: 30px;
}
.product-quantity-details .quantity{
border: 2px solid black;
margin: 0 10px;
background: white;
width: 36px;
height: 36px;
font-size: 15px;
line-height: 15px;
color: black;
width: auto;
height: auto;
}
.product-quantity-details .quantity:after{
content: 'x'
}
.cart-preview .body .checkout>button {
position: relative;
background: black;
text-align: center;
color: white;
height: 20px;
width: 205px;
}
.taxes {
position: relative;
}
.cart-total .value {
float: right;
}
.cart-total .value:after {
content:'€'
}
.cart-total .label {
float: left;
}
.taxes .value {
float: right;
}
.taxes .label {
float: left;
}
.cart-preview.cart-overview {
width: 100%;
position: inherit;
}
.cart-preview.cart-overview .body {
display: block;
position: inherit;
width: 100%;
}
.cart-preview .header > :first-child {
float: left;
}
.cart-preview .header > :last-child {
float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
clear: both;
content: "\A0";
}
.cart-preview .body {
border: 1px solid #808080;
padding: 2px;
}