Flexbox Style Only Works When Manually Entered in Chrome Developer Tools

I am trying to get an ag-Grid to fill the vertical space in a panel on a page. If I put the style on the .HTML page like this:


… or include it in the Javascript:

            $(".right_panel > div").css("display", "flex");
            $(".right_panel > div").css("flex-direction", "column");
            $(".right_panel > div").css("height", "95%");
            $(".right_panel > div").css("flex", "1");

… the styles will correctly show up in the Chrome CSS Debugger:

enter image description here

… but my ag-Grid is crushed down to zero height.

{image of a page with a grid that only has a navbar under which there’s a lot of white space}

Disabling them and retyping them into the CSS Debugger verbatim:

enter image description here

… and the grid works fine

{image of a page with a grid that properly fills the page}

Is there something obvious (obviously) that I’m missing? I’ve read questions like this one to get the grid to fill the available vertical space. Why does this seemingly correct css only work when manually entered in the CSS debugger, and how do I fix it in my code?

Heavily edited HTML for the page:


...