I have a unique table that consists of 3 main parts:
- the header
- the content
- the footer
Using flexbox, I managed to make the "content" section occupy all available view height. However, this was not explicitly done and now when there are too many items in the "content," the page expands instead of the "content" section overflowing.
My goal is for the "content" to still utilize the available view height without causing the page to overflow but instead create a scrollable area within the "content" section.
Here is the code snippet for the 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 will be generated within the content section without causing the page to overflow.
Currently, as shown here, the page overflows and does not display the footer.