When you want a FIXED width and height. Okay, that may sound like a smart aleck answer (obvious answer), but I only use it when I want something to show at a specific width/height (in pixels), or a specific ratio (in % values).
Specific width/height in px may cause problems in responsive sites, so you’ll need to check and may require the use of @media queries to override these fixed width/height values at certain device screen widths. With percentages, it’s not so much a problem at wide screens, but at small mobile screens, then it may cause problem, then you may also need to override these % values using @media queries.
In your example above, your buttons are already controlling the overall height your navbar is shown so there’s no need for a height parameter. You can just use padding to give it some spacing.
You may also want to look at min-height css property. It can come in useful. You set a fixed minimum height for a div to display, but if needed, the div can grow taller than your min-height property.