Hi there,
I have a flex layout with a following configuration:
-----------
| 1 | 2 |
-----------
| 3 | Grid |
-----------
I'd like a Grid to have an auto height (depends on the free space) with scrollbar showing, but I cannot reach such setup. Here is example:
https://stackblitz.com/edit/react-kgfbgg-bt4gpa?file=app%2Fmain.jsx
Even though the Grid has a scrollbar there is also scrollbar on entire page I would like to get rid of.
Thanks in advance!
1 Answer, 1 is accepted
Hello,
Thank you for the example.
In this case, we can suggest setting height to the parent div in percentage and the Grid will size automatically based on that:
https://stackblitz.com/edit/react-kgfbgg-psdq3d?file=app%2Fmain.jsx
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Well, with setting up height explicitly it works, can it be said that in order to make scroll work predictably `height` need to be set anyway ?
In my example first row might have static height but second row need to have responsive depends on the screen size, if I set height to parent container there won't be responsivness anymore.
It will be responsive in a way because it will take a percentage of the screen. If the screen is large it will take more space. If the screen is smaller 50% of the smaller screen will make it smaller.
The main point is that the Grid will size based on the available space in the container, if you set the flex container to behave as required based on the support flex styles, the Grid will size according to that.