Overflow scroll on element - html

Question

Here what I've now:
and how it should looks:
<div class="overflow-auto flex flex-col h-full">
<div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
<div
v-for="item in items"
:key="item.id"
:item="item"
class="flex-1 py-4 lg:py-8"
/>
</div>
<div class="flex flex-col bg-white lg:bg-gray-light">
<div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
<template #content>
<h4
class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
v-text="$t('We Also Recommend')"
/>
</template>
</div>
<div class="flex flex-col px-7 divide-y-2 divide-metal">
<div
v-for="product in recommendProducts"
:key="product.sku"
:item="product"
class="flex-1 py-4 lg:py-8"
/>
</div>
</div>
</div>
<div class="sticky top-0 bottom-auto">
<div class="p-10">
<div class="desktop-only flex justify-between items-center pb-10 uppercase">
<p
class="subtitle1"
v-text="$t('Subtotal')"
/>
<div
:value="totals.subtotal"
class="subtitle1"
/>
</div>
<div class="flex flex-col">
<div
v-text="$t('Proceed to Checkout')"
class="btn btn--lg btn--black mb-3.5 text-[15px]"
/>
</div>
</div>
</div>
</div>
And the problem is that bottom div should cover products and section 'We also recommend' with products should have scroll. Now bottom div extends beyond the view. On bottom div I've position: sticky and on section 'We also recommend' overflow: auto. Where's the problem and how to fix it?

Answer 1

If I understand your problem correctly, the bottom sheet does cover the last part of the scrolling content, right? There is an easy solution:
Just add
padding-bottom: XXpx; # XX == size of sticky bottom sheet
to the scroll container