Question

在我的应用中，使用flexbox时，页面宽度减小时，材质选项卡无法正确缩小。

我能够在此处复制该问题：https://stackblitz.com/edit/angular-xthdcw

代码：

.panel{
  padding: 24px;
  border: 1px solid black;
  margin-right: 20px;
}

.container{
  display: flex;
}

<div class="container">
<div class="panel">
<mat-tab-group>
  <mat-tab label="FirstLongText"> Content 1 </mat-tab>
  <mat-tab label="SecondLongText"> Content 2 </mat-tab>
  <mat-tab label="ThirdLongText"> Content 3 </mat-tab>
</mat-tab-group>
</div>
<div class="panel">
  TestText123
</div>
</div>

因此，当页面的宽度减小并在顶部栏中显示导航箭头时，material-tab-group不应该缩小吗？但是您可以看到第二个面板不正确。那么这是怎么了？

Answer 1

此问题与mat-tabs或flex没有关系。这里的问题是select t.userid, c.userid coordinator from tablename t inner join ( select * from tablename where iscoordinator = 'True' ) c on c.teamid = t.teamid类的元素不知道如何调整自身大小。它们位于flex容器中，但是没有设置.panel或flex属性，也没有任何大小设置属性。因此它们会恢复为默认值，在这种情况下为display。由于未在这些元素上设置display: block，因此它们占用的空间尽可能多as explained here，并且由于它们位于未设置width的flex容器中，因此也会导致默认行为flex-direction。因此，具有flex-direction: row类的元素显示在一行中，并且每个元素都采用尽可能大的宽度（这导致它们采用其内容的宽度）。那说;为了使事情变得美好，您需要做的就是告诉.panel元素如何调整自身大小；

.panel

这是一个有效的演示https://stackblitz.com/edit/angular-xthdcw-hp4pdg

另一种解决方案是在.panel { padding: 24px; border: 1px solid black; margin-right: 20px; flex: 0 0 50%; /** required to make sure that elements take 50% width no matter whether they can grow or shrink.*/ width: 50%; /** we are telling elements to size themselves */ box-sizing: border-box; /** is required to achieve correct size calculations otherwise all those margins/paddings mess things up */ }上设置flex-direction: column，因为默认情况下，具有列布局的flex容器中的元素采用全宽度的parent。在这种情况下，.container元素知道如何调整大小，一切都会正常工作。

这是列布局https://stackblitz.com/edit/angular-xthdcw-p6ab2w

的演示

使用Flexbox时材质标签无法正确收缩

1 个答案: