Image size not readjusting to fit within flexbox

I am using max-height for my image but it still doesn't fit within the section and overshoots.

I have specified a fixed size for top level div (90vh) and under it, I am using percentages to specific relative heights.

The structure looks like

<div id="non-responsive-div"> <!-- height:95vh -->
  <div id="top-level-container" class="three-row-grid-container"> <!-- max-height:100%; -->
    <app-status-bar id="status-bar"></app-status-bar> <!--max-height:100%; --> 
    <app-nav-component id="menu-nav" ></app-nav-component><!-- grid child --> <!--max-height:100%; --> 
    <app-content-component id="content"></app-content-component><!-- grid child --> <!--max-height:100%; --> 
  </div>
  <div>
    <app-progress-bar></app-progress-bar><!-- not a grid child -->  <!--this is positioned using absolute positioning and thus will not affect positions of others -->
    <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [dialogContext]=""></app-dialog-box>
  </div>
</div>

The nav component html is

<div id="logo-nav-div" class="logo-nav-style logo-nav-grid-container"> <!--   max-height:100%; --> 
  <div id="logo-nav-left" class="logo-nav-left-flexbox-container">
    <img id="logo-image" src={{logofile}}> <!-- max-height:100%; -->
    <button type="button" (click)="onGQClick()" [ngClass]="'unselected-button'">GQ</button>
    <button type="button" (click)="onGTClick()" [ngClass]="'unselected-button'">GT</button>
    <button type="button" (click)="onPClick()" [ngClass]="'unselected-button'">P</button>
  </div>
  <div id="logo-nav-right" class="logo-nav-right-flexbox-container">
    <button type="button" (click)="onCQClick()" [ngClass]="'unselected-button'">CQ</button>
  </div>
</div>

Attached is the approx. Fiddler. I am unable to upload the image though - https://jsfiddle.net/01fj8hpz/

My suspicion is that the issue might be in flexbox as if I move the image out of flexbox, the image seem to scale down. But then I am not able to put the flexbox inline with the img. It comes in separate line.

It seems the trick is to assign height:100% for each child element. Then setting max-height:100% seem to take effect. In my case, I set height:100% for logo-nav-div', logo-nav-left and logo-nav-right. This fixed their height and then max-height became effective. Without setting height to 100%, the height seem to take the value of its largest child element.