图像尺寸未重新调整以适合Flexbox

Question

我正在为图像使用def test_test(self): with mock.patch('module.FUNC.get') as mo: mo.return_value = "var" self.assertIn("no", A.test()) ，但仍不适合本节和过冲。

我为顶层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

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

我怀疑问题可能出在<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> 中，就像我将图像移出flexbox一样，图像似乎缩小了。但是，然后我无法将flexbox与flexbox内联。它在单独的行中。

Answer 1

看来，诀窍是为每个子元素分配height:100%。然后设置max-height:100%似乎生效。就我而言，我为height:100%'，logo-nav-div和logo-nav-left设置了logo-nav-right。这样就固定了它们的高度，然后max-height生效了。如果不将height设置为100％，则高度似乎采用其最大子元素的值。