.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; } ::ng-deep .left-drawer-toggle { position: absolute; top: calc(50% - 30px); left: -4px; border: 1px solid #dddddd; background-color: #ffffff !important; width: 24px; height: 60px; border-radius: 0 8px 8px 0; display: flex; justify-content: center; justify-items: center; font-size: 1.8em; }