Problem with Clarity Design in feature modules

I'm kind of struggling with building my Angular App in combination with the Clarity Design Framework. I followed the getting started guide (https://clarity.design/get-started/developing/angular/), and the elements itself are working correctly. The problem comes in when I start to break down the html structure into multiple components.

I started to build the app.component.html like following:

<div class="main-container">
    <header class="header-1">
        <div class="branding">
          <a href="/" class="nav-link">
            <clr-icon shape="shield-check"></clr-icon>
            <span class="title">test</span>
          </a>
        </div>
    </header>    
    <div class="content-container">
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <app-sidenav></app-sidenav>
    </div>
</div>

The header section works fine, but the sidenav (clr-vertical-nav from Clarity) doesn't look like it's supposed to: how it actually look's

The sidenav component is sitting in a feature module, as stated in the documentation I imported BrowserAnimationsModule and ClarityModule in the root module and in the feature module.

sidenav-component.html:

<clr-vertical-nav>
  <a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
  <a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
  <a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
  <a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
  <a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
  <a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
</clr-vertical-nav>

However, when I place the content of sidenav-component.html directly in the app.component.html everything works like it is supposed to. Can anyone explain me why or how I can solve this problem?

Edit: simple project on stackblitz

Thanks in advance, Chris

Solution

Can you try moving the app-sidenav element above the .content-area div? e.g:

<div class="main-container">
    <header class="header-1">
        <div class="branding">
          <a href="/" class="nav-link">
            <clr-icon shape="shield-check"></clr-icon>
            <span class="title">test</span>
          </a>
        </div>
    </header>    
    <div class="content-container">
        <app-sidenav></app-sidenav>
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

If that doesn't work, spin up a simple example that reproduced the issue in stackblitz with one of the starters so I can look at a working apoplication.

---------EDIT---------

It does work. Move the app-sidenav above the content area and handle the height of the clr-vertical-nav with css on the application side.

Here is the css I chose to write, ymmv:

clr-vertical-nav {
  height: 100%;
}

Here is a forked stackblitz demonstrating a working sidenav.