Angular Material Tabs：如何使 FLEX 适合不溢出

Question

这是 stackblitz 演示 https://stackblitz.com/edit/angular-wg8jkx

我正在尝试在我拥有的地方实现正常的标题 h1 标题（左侧） 选项卡（可用宽度） 工具栏（右侧...

所以我有这个样式...直接引用：

.page-header {
  display: flex;

  .page-title {
    flex: 0 0 auto;
  }

  .page-tabs {
    flex: 1 0 auto;
  }

  .page-toolbar {
    flex: 0 0 auto;
  }
}

在我看来，我正在使用类似的东西即时添加标签

<nav #tabNav mat-tab-nav-bar color="accent">
  <a mat-tab-link *ngFor="let tab of tabs">
    {{ tab }}
  </a>
</nav>

一旦我添加了足够多的标签，标签就会溢出......它应该显示的是 按钮（标签分页）......

如何动态实现这一点？

Answer 1

这可以通过指定以下 css 规则来完成：

.page-tabs {
  flex: 1;
  overflow-x: hidden;
}

flex: 1 是flex: 1 1 0% 的快捷方式。这里的关键是将flex-grow 和flex-shrink 都设置为1。

只有在那之后overflow-x: hidden 才能发挥作用。

Forked Stackblitz