Adjusting the Camera's Viewport Rect automatically upon aspect ratio change

I’m developing a game that has a basic GUI structure as below (for 16:9 aspect ratio.

But when the aspect ratio changes (say becomes 16:10), the layout changes to the one like:


Which means a horizontal blank space is created between the Camera viewport rect and the lower Canvas element. The lower canvas elements has fixed height (218 pixels) and it always stay at the bottom edge of the screen. What I want is to stretch to touch the upper edge of the Canvas element always (or in other words remove the blank space between these two parts).

I’ve already optimized the Canvas elements for Aspect ratio change, but Camera Viewport not being a canvas element is not adjusting.

I’ve already tried with Camera’s Rect and PixelRect classes but no success.

For an aspect ratio 16:9, and screen size 1366 x 768. So subtracting 218 (the height of lower canvas element) I get 550 = the height of Canvas Viewport Rect. So according to my calculations the ViewPort Rect’s height should be 550/768 = 0.716 which is fine and works.
But when aspect ratio is 16:10 and screen size 1228 x 768. Now, doing the same above calculations,
Height of canvas rect in pixels = 768 - 218 = 550
Viewport rect height = 550/768 = 0.716, but this time I get that blank horizontal space.

Please suggest me how do I fix this.

Thanks in advance.

Trying using the following configuration for your camera, and canvas panels (respectively). It set each component as a fraction of the total screen height and width. It assumes your canvas is configured for
“Screen Space Overlay”.
101292-canvas-and-screen-config.png