i have a table table which is made out of 3 partsthe headerthe contentthe footerWith flex box ive made it so that the "content" section takes up all of the available viewheight but this isnt done explicity so when theres to many items in "content" the page itself will expand instead of the "content" section overflowing.
I want the "content" to still take up all the available viewheight without overflowing the page itself and instead overflowing the "content" section thus creating a scroll area
content section:
<code>
<div class="flex flex-col flex-1 text-sm text-[#707070] overflow-scroll" :class="csvData ? '' : 'justify-center items-center'"><!-- Table body --><div v-if="csvData" v-for="(row, index) in filteredData" :key="index" class="grid items-center gap-4 px-2 py-4 grid-cols-[auto,1fr,1fr,1fr] sm:grid-cols-[auto,1fr,1fr,1fr,1fr] md:grid-cols-[auto,1fr,1fr,1fr,1fr,1fr]"><input @click="toggleRow(index)" :disabled=" enableEditMode ? true : false" type="checkbox" v-model="selectedRows[index]"><span>Unassigned</span><span role="textbox" :class="row.editMode ? 'border p-1 border-dashed border-[#606069]' : ''" >{{ row.editedData[0] }}</span><span role="textbox" :class="row.editMode ? 'border p-1 border-dashed border-[#606069]' : ''" >{{ row.editedData[1] }}</span><span role="textbox" :class="row.editMode ? 'border p-1 border-dashed border-[#606069]' : ''" class="hidden md:block" >{{ row.editedData[2] }}</span><span role="textbox" :class="row.editMode ? 'border p-1 border-dashed border-[#606069]' : ''" class="hidden sm:block" >{{ row.editedData[3] }}</span></div></div></code>
a scrollable area created in the content section without overflowing the page.
As you can see here it currently overflows the page and doesnt show the footer.[image of page overflowing](https://i.sstatic.net/Ol9R5ae1.png)
