What is replacement of box-orient with the new flexbox?

By examining and inspecting your StackBlitz demo. It seems like it is just an issue of view update. which can be resolved using setTimeout() function.

I have made some changes in your StackBlitz code and solved the issue. Here is the link: https://stackblitz.com/edit/sidenav-content-clamp-issue

I have used the openedStart event of MatDrawer and I am updating the content of side-bar inside event handler which has somehow solved the issue.

As I said earlier that it seems to be an update issue. So instead of assigning the content dynamically, we can also populate the .text class dynamically which will resolve the issue too.

Here is the code for .ts nad .html files.

Template File

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
    <mat-sidenav #sidenav mode="side" [(opened)]="opened" (openedStart)="onSidebarOpenedChanged()" (closed)="events.push('close!')">
        Sidenav content

        <div class="container">
            <div class="text">
                {{content}} <!-- update this content in openedStart event handler-->
            </div>
        </div>
    </mat-sidenav>

    <mat-sidenav-content>
        <p>
            <mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox>
        </p>
        <!-- <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p> -->

        <div>SideNav should look the same</div>
        <div class="container">
            <div class="text">
                {{longStr}}
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

Component File

import { Component } from '@angular/core';

/** @title Sidenav open & close behavior */
@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  events: string[] = [];
  opened: boolean;
  longStr = `Can we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can
                we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’? Can
                we make this upper case? and also remove the word and’? Can we make this upper case? and also remove the word and’?`
  content;
  shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));

  onSidebarOpenedChanged() {
    setTimeout(() => {
      this.content = this.longStr;
    });
  }
}

I also tried to find the replacement for box-orient but didn't find one and made this work around. I hope this will help.

In your angular code example, if you open the side nav, and toggle the div css display property twice in dev tools, it then works as expected. You can then open and close it with not problem.

Try to render the div inside the side nav only when it is first opened.

You can define a line-height on the inner div, and then set the max-height to twice the line height:

line-height: 1.2em
max-height: 2.4em

Per MDN, the default value of normal for line-height is around 1.2em but changes depending on the font.

Note: This will not allow the text to ellipsis