I am designing a webpage that requires two containers stacked on top of each other with some space in between. The bottom container should occupy the remaining screen space accurately, neither more nor less. Inside this lower container, there will be fixed content (such as a navigation bar) along with dynamic content fetched from a database, which needs to be scrollable. However, I am facing an issue where the scrollable content overflows the lower container and goes out of the viewport. I have tried various solutions like overflow-hidden/overflow-auto properties but none have been successful. Additionally, all the content needs to have fixed positioning, margins, paddings, width, and height.
Here is a snippet of my code:
Index.vue
<template>
<div class="h-screen bg-gray-600 flex flex-col">
<div
class="flex h-56px w-auto z-1001 flex h-56px top-10 tablet:left-8 mb-16 object- center tablet:object-left-top inline-flex justify-center items-center bg-grey-200 rounded-lg shadow-rb z-1001"
>
<UpperContainer />
</div>
<div
class="flex-1 h-full w-full tablet:w-420px mb-10 tablet:left-8 justify-center items-center bg-green-200 rounded-lg shadow-rb z-1001"
>
<LowerContainer />
</div>
LowerContainer.vue
<template>
<div class="">
<FixedContentContainer class="">
<FixedContent name="Example">
<ScrollableContentContainer :scrollableContent="content"
class="relative h-full w-full bg-blue-400 overflow-hidden"
></ScrollableContentContainer
></FixedContent>
</FixedContentContainer>
ScrollableContentContainer.vue
<div class="overflow-auto w-auto absolute h-full">
<div v-for="content in scrollableContent" :key="content.name">
<ScrollableContent
:name="content.name"
/>
</div>