mat-tab-group превышает ширину родительского div

#html #css #angular #flexbox #angular-flex-layout

#HTML #css #угловой #flexbox #angular-flex-layout

Вопрос:

Я искал об этой проблеме, и, похоже, это связано mat-tab-group с тем, что она была создана также с гибкими макетами, и по какой-то причине она мешает или игнорирует ширину родительского div.

 <div fxLayout="row" fxFlex="50vh" style="background-color: cyan;" *ngIf="selectedService$ | async as selectedService"> 
    <!-- SPECIFIC PANEL -->
    <div fxLayout="column" fxFlex="15vw" style="background-color: blueviolet;">  
      <!-- STUB -->
    </div>
    <div fxLayout="column" fxFlex="85vw">
      <mat-tab-group>          
        <mat-tab label="Records">
          <ng-template matTabContent>
            <app-voice-records>
              <!-- COOL GRAPH GOES HERE -->
            </app-voice-records>
          </ng-template>
        </mat-tab>
      </mat-tab-group> 
    </div>
  </div>

Как это выглядит. Он не должен превышать голубой фон.

1. Привет! Можете ли вы попробовать удалить vw из fxFlex в столбцах? Вы также можете попробовать fxFill в родительском контейнере

2. Как бы я тогда разделил пространство?

3. Просто удалите единицу, а не число!

4. Боже, это сработало! Но почему? Опубликуйте это как ответ

Ответ №1:

Иногда vh и vw ведут себя не так, как ожидалось. Увидев ваш макет, было очевидно, что по какой-то причине он не занимает всю ширину экрана для своих вычислений, и это может быть одним из побочных эффектов использования этих единиц. Это связано с тем, что, например, vh равен 1% от высоты исходного содержащего блока, и этот содержащий блок не всегда одинаков. Также, когда используется fxFlex, я обычно вижу, что люди не используют единицы измерения и часто просто используют число, которое, как я думаю, по умолчанию соответствует процентам, которые, на мой взгляд, более надежны, но я думаю, что все сводится к тому, какой блок берется в качестве начального, содержащего его в макете.