Material2 - 当父级显示 flex 时，分页不显示在选项卡上

Question

我已经在他们的 GitHub 页面上打开了一个错误，但同时有人已经找到了解决方法？ https://github.com/angular/material2/issues/8788

使用 Material 2 选项卡时，在其显示属性设置为 flex 的父容器中，选项卡上的分页控件不显示。 （当然，选项卡必须足以强制显示分页）

我想做的是这样的：

<div class="in-flex">
    <mat-card>Simple card</mat-card>
    <mat-tab-group>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
        <mat-tab label="Tab">Content</mat-tab>
    </mat-tab-group>
</div>

风格

.in-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

我不能给孩子们任何宽度，无论是百分比还是 rems 或其他，我需要让他们完全响应并以像 flex 那样的方式进行管理。有什么建议吗？

Answer 1

临时解决方案：
它可能会帮助你。
在 css 中添加断点媒体查询。

@media only screen and (max-width: 1279px) {
   .in-flex{
     display: block !important;
   }
}