Just setting font-size: ...vh is not a good idea in terms of accessibility or usability. For the first one, visually impaired users won’t be able to increase the font size (check this). And for the second one, desktop users would like to adjust the size of the windows for their specific needs; in my case, if I reduce the browser windows’ height to half of it, I end up being unable to read the text in the table of contents.
I get your interest of making such text fluid. But for that you should need to (somehow) set a mimimum and maximum font size which is something not as trivial as we would expect. If you are interested, read the section Controlling Viewport Units To Get Minimum And Maximum Font Sizes in this article.
Actually I noticed the overflow bug, but did not find a way to solve it.
I set the units to vh of navbar elements because width of my navbar itself is set to vh units. Otherwise I had a bug when I tried to change my navbar, the button elements would get smaller than navbar itself.
On the other hand, if I set navbar to fixed size it is increasing and decreasing depending on zoom. I want the navbar to take a constant fraction of the screen, but evade the overflow problems. Should I use display: grid to solve this?
You can assign width: 100% to your buttons, which will make them as long as its parent content. But, again, setting a size (either widht or font-size) using only viewport units it’s too extreme, and will give you bad results (like too small or too big stuff). In the case of font-size, I already gave you some links so you can use such units in a good way. For width, it’s easier: just use max-width / min-width to limit the size of any element.
Well, what’s the problem of navbar increasing and decreasing if you apply zoom on the page? Zooming is used to increase text-size and if text size is increased, then its container (navbar) should increase as well to avoid overflowing.
I think you are overusing vh and causing a whole mess in your content flow, because of that. The only place that needs to use vh is your navbar height.