.main-container { height: 100%; display: flex; flex-flow: row; border-top: none; .split-area { overflow: hidden; .left-side { width: 100%; height: 100%; flex: 0 0 auto; position: relative; } } .contents { flex: 1 1 auto; min-width: 320px; height: 100%; .chat-messages { width: 100%; height: 100%; font-size: 1em; } .rightDrawer { width: 320px; height: 100%; flex: 0 0 auto; overflow: hidden; -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3); box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.3); } } .right-side { height: 100%; flex: 0 0 auto; } } ::ng-deep .mat-drawer-inner-container { overflow: unset !important; } ::ng-deep .mat-tab-labels { display: flex; width: 100%; border-bottom: 2px solid #dddddd; flex: 1 1 auto; justify-content: space-around; } .left-drawer-toggle { position: absolute; top: calc(50% - 20px); }