When on my website on a phone, if I expand all the drop downs, they get cut off by the bottom without being able to scroll down. Now, I can increase the grid height of the second row to make enough room for the submenu when all drop-downs are expanded (now able to scroll down).
The problem with that is when just one drop-down is expanded, or none at all, there is so much empty space below the menu that the user can scroll down to.
Question : Is there anyway for the grid height of the second row to expand AS dropdowns are activated, such as “Support Us?”
I had the same issue at first on my mobile menu. The container is set to 100vh and Overflow Content is set to Scroll. The grid on the container is set to min/max, and the max is max-content. It now has the correct height when menus are collapsed and allows for scroll down when menus are expanded.
Seems to be the case as @wcavataio stated. Having it at 120 VH means the grid has to be 120% of the browser height. For things like a collapse/expand section, I personally like using auto without a minimum as it will just adjust to the size of the contents within.
If you want to make sure there is a bit of space between the end of the content and the next section, you can add some padding .
