图像大小未重新调整以适合 flexbox

Question

我正在为我的图像使用 max-height，但它仍然不适合该部分并且超出范围。

我已经为顶层 div (90vh) 指定了一个固定大小，在它下面，我使用了特定相对高度的百分比。

结构看起来像

<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>

nav component html 是

<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>

附件是大约。提琴手。我无法上传图片 - https://jsfiddle.net/01fj8hpz/

我怀疑问题可能出在 flexbox 中，好像我将图像移出了 flexbox，图像似乎缩小了。但是后来我无法将 flexbox 与 img 内联。它在单独的行中。

Answer 1

似乎诀窍是为每个子元素分配 height:100%。然后设置 max-height:100% 似乎生效了。在我的例子中，我为 logo-nav-div'、logo-nav-left 和 logo-nav-right 设置了 height:100%。这固定了他们的高度，然后 max-height 生效了。如果不将 height 设置为 100%，高度似乎取其最大子元素的值。

图像大小未重新调整以适合 flexbox

Image size not readjusting to fit within flexbox

html

css

flexbox

flexboxgrid