так а почему в stackblitz работает?

Я бы помог но с телефона не удобно(((

если я выставлю в auto, не работает там тоже.

ну это да)

тебе надо что бы два елемента равномерно сужались?

Да, мне нужно чтобы они были во flex контейнере и занимали по ширине одни и те же пропорции.
mat-drawer их должен сужать(когда он выдвигается)

но в этих элементах есть stiсkly элементы, они должны работать!

сделай так

.example-container {

  height: 1000px;
}

.content {
 display: flex;
}
.content > div {
 flex: 1
}



.sticky1 {
 display: flex;
 background-color: red;
 padding: 50px;
 font-size: 20px;
 z-index: 60;
}

.sticky2 {
 display: flex;
 background-color: yellow;
 padding: 50px;
 font-size: 20px;
 z-index: 60;  ;
}

<button mat-raised-button (click)="drawer.toggle()">
   Toggle drawer
 </button>

<mat-drawer-container
 [hasBackdrop]="false"
 class="example-container my-mat-drawer-container">

 <mat-drawer #drawer mode="side" position="end">
   I'm a drawer
 </mat-drawer>

 <mat-drawer-content class="content my-mat-drawer-content">
 
   <div >
     <div class="sticky1">
       I will stick to the screen when you reach my scroll position
     </div>

   </div>
   <div>      
     <div class="sticky2">
       I will stick to the screen when you reach my scroll position
       </div>
   </div>

 </mat-drawer-content>
</mat-drawer-container>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
   Use of this source code is governed by an MIT-style license that
   can be found in the LICENSE file at http://angular.io/license -->

это то что тебе надо?

я не вижу по скрину)

ты сдвинь их вниз, чтобы посмотреть

@kargozerov , че то я у тебя в коде вообще не вижу position: stickly

@kargozerov , мне нужно, чтобы эти два элемента приклеивались к верху, когда мы прокручиваем эту область.
Это и делает как раз position: stickly

так вот оно не хочет работать, когда у нас есть mat-drawer-container

Оно начинает работать, только когда выставляешь на mat-drawer-container и mat-drawer-content такие стили:

.mat-drawer-container.my-mat-drawer-container {
    overflow: unset;
}

.mat-drawer-content.my-mat-drawer-content {
    overflow: unset;
}

но тогда появляется скролл по горизонтали, от которого никак не избавится

избавляешься от скролла —> stickly перестает работать.
Чинишь stickly —> скролл появляется