Issue
<div className='block justify-center flex flex-col h-screen py-8 px-48'>
<div className='flex'>
<Form />
</div>
<div className='flex-1'>
<div className='shadow-md flex flex-col'>
<div className='flex'>
<div className='flex w-full py-2 px-2 bg-white border-0'>
<div className='flex-1'>
<Searchbar />
</div>
<div className='flex'>
<Button />
</div>
</div>
</div>
<div className='overflow-auto flex-1'>
<Table />
</div>
</div>
</div>
</div>
Here is what my React page component looks like (using Form, Searchbar, Button, Table as other components). My issue is that the Table element is exceeding the height of the parent block, and the overflow-auto is not triggering to keep it contained withing the block bounds.
After alot of research I stumbled into using flex and flex-1 to have items take up remaining space of the parent div. To my (limited) knowlege, I do not see how the flex, flex-1, flex-col setup I have here is not leading to the table being overflowed correctly, unless flex does not work the way I think it does. Unfortunately, other answers that tried to calculate the height of the remaining children seemed to hinge o nthe fact that the other children have a static size and are not flexed, like mine are.
Honestly, I am pretty new to React and javascript in general, so any help is appreciated. Thanks!
This is what it currently looks like, and this is what I want it to look like. The table, form, and searchbar/button combo all behave and look exactly how I want them too, with the exception that when there is too much table data, the overflow does not work, as I described
Solution
You'd want to add a vertical flex layout on the parent of .shadow-md
element, so that it can be limited to the parent height. Furthermore, you'd need to apply min-height: 0
to the compressible parents of the <Table>
to override their default min-height: min-content
so that they can shrink:
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class='block justify-center flex flex-col h-screen py-8 px-48'>
<div class='flex'>
<Form>Form</Form>
</div>
<div class='flex flex-col flex-1 min-h-0'>
<div class='shadow-md flex flex-col min-h-0'>
<div class='flex'>
<div class='flex w-full py-2 px-2 bg-white border-0'>
<div class='flex-1'>
<Searchbar>Searchbar</Searchbar>
</div>
<div class='flex'>
<Button>Button</Button>
</div>
</div>
</div>
<div class='overflow-auto flex-1 min-h-0'>
<Table class="h-[200vh]">Table</Table>
</div>
</div>
</div>
</div>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.