清晰度设计侧边导航在内容超出视图时无法滚动

Question

所以我目前正在使用侧导航，但是当导航链接超过视图时，除非缩小，否则我无法滚动以查看"隐藏"链接。

我使用 Angular 5 作为前端框架，这就是我安排组件的方式：

<nav class="sidenav">
  <students>
  </students>
</nav>

在学生组件内部：

<section class="sidenav-content">
  <section class="nav-group">
    <label>Alumnos</label>
    <ul class="nav-list">
      <li *ngFor="let student of students | orderBy: 'number'">
        <a
          class="nav-link"
          [class.active]="studentIdSelected == student.id"
          (click)="selectStudent(student)">
        {{ student.number }} - {{ student.name }}
        </a>
      </li>
      <li>
        <a class="nav-link" (click)="addStudent()">Agregar alumno</a>
      </li>
    </ul>
  </section>
</section>

我

不确定我是否遗漏了什么，因为我遵循了文档并期望获得滚动选项。

Answer 1

是否正确使用了布局？有关布局的更多信息，请参阅：https://vmware.github.io/clarity/documentation/v0.11/app-layout

请看一下这个StackBlitz：https://stackblitz.com/edit/clarity-light-theme-v11-mkudjf?file=app/app.component.html

布局标记为：

<div class="main-container">
  <header class="header-2">
    Header
  </header>
  <div class="content-container">
    <div class="content-area">
      Content Area
    </div>
    <nav class="sidenav">
       ...
    </nav>
  </div>
</div>

.sidenav追随.content-area

编辑：请注意，Clarity 团队建议您使用垂直导航而不是侧边导航。垂直导航的文档如下： https://vmware.github.io/clarity/documentation/v0.11/vertical-nav/basic-structure/charmander