Expand row from grid to use free space left by a max-height row

Given a grid body and these 3 panes:

┌───┬───┐
│   │ B │
│ A ├───┤
│   │ C │
└───┴───┘

I'm trying to have A and B/C columns to be 50% 50% viewport width ; A to be 100% viewport height, B 60vh and C 40vh.
But also C to be max-height of its max-content, and so B to take the remaining place left by C if C's max-content is lower than 40vh.
All panes have overflow-y: auto and A & B always have scrollable content.

So starting with this

body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 60% 40%;
}
.a {
    grid-row: 1 / 3;
}

which work appart for the C's max-height part, I tried to replace grid-template-rowswith 60% minmax(40%, max-content), or even to use fixed height (say 16em) instead of max-content minmax(60%, calc(100% - 16em)) minmax(40%, 16em), but I'm definitely missing something here.

from Recent Questions - Stack Overflow https://ift.tt/33YrbG1
https://ift.tt/eA8V8J