diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
index a431e23a..ab876dda 100644
--- a/packages/gantt/src/gantt.component.html
+++ b/packages/gantt/src/gantt.component.html
@@ -2,7 +2,7 @@
   <div class="gantt-header">
     <gantt-table-header #tableHeader [columns]="columns"></gantt-table-header>
     <div class="gantt-container-header">
-      <gantt-calendar-header [style.padding-right.px]="verticalScrollbarWidth"></gantt-calendar-header>
+      <gantt-calendar-header [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"></gantt-calendar-header>
     </div>
   </div>
   <gantt-loader *ngIf="loading"></gantt-loader>
@@ -15,7 +15,7 @@
     [maxBufferPx]="styles.lineHeight * 20"
   >
     <ng-container *cdkVirtualFor="let item of flatItems; trackBy: trackBy"></ng-container>
-    <div class="gantt-side" [style.width.px]="tableHeader.tableWidth + 1" [style.padding-bottom.px]="horizontalScrollbarHeight">
+    <div class="gantt-side" [style.width.px]="tableHeader.tableWidth + 1" [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight">
       <div class="gantt-side-container">
         <div class="gantt-table">
           <gantt-table-body
@@ -39,8 +39,8 @@
     </div>
     <div class="gantt-container">
       <gantt-calendar-grid
-        [style.padding-right.px]="verticalScrollbarWidth"
-        [style.padding-bottom.px]="horizontalScrollbarHeight"
+        [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"
+        [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight"
       ></gantt-calendar-grid>
       <div class="gantt-main">
         <gantt-main
diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
index 07b57cec..4d3ca766 100644
--- a/packages/gantt/src/gantt.component.ts
+++ b/packages/gantt/src/gantt.component.ts
@@ -19,7 +19,7 @@ import {
     Optional,
     OnChanges,
     SimpleChanges,
-    HostListener
+    AfterViewChecked
 } from '@angular/core';
 import { takeUntil, take, finalize, skip } from 'rxjs/operators';
 import { Observable, from } from 'rxjs';
@@ -31,11 +31,10 @@ import { GANTT_ABSTRACT_TOKEN } from './gantt-abstract';
 import { GanttGlobalConfig, GANTT_GLOBAL_CONFIG } from './gantt.config';
 import { NgxGanttRootComponent } from './root.component';
 import { GanttDate } from './utils/date';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ViewportRuler } from '@angular/cdk/scrolling';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
 import { GanttPrintService } from './gantt-print.service';
 import { InputBoolean } from 'ngx-tethys/core';
-import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.component';
 @Component({
     selector: 'ngx-gantt',
     templateUrl: './gantt.component.html',
@@ -51,7 +50,7 @@ import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.compone
         }
     ]
 })
-export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit {
+export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit, AfterViewChecked {
     @Input() maxLevel = 2;
 
     @Input() async: boolean;
@@ -98,17 +97,6 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
 
-    @ViewChild(GanttMainComponent, { static: true, read: ElementRef }) ganttMainContent: ElementRef;
-
-    @HostListener('window:resize')
-    onWindowResize() {
-        this.updateScrollBarOffset();
-    }
-
-    verticalScrollbarWidth = 0;
-
-    horizontalScrollbarHeight = 0;
-
     get loading() {
         return this._loading;
     }
@@ -131,6 +119,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         elementRef: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,
         ngZone: NgZone,
+        private viewportRuler: ViewportRuler,
         @Optional() private printService: GanttPrintService,
         @Inject(GANTT_GLOBAL_CONFIG) config: GanttGlobalConfig
     ) {
@@ -188,7 +177,6 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
     }
 
     ngAfterViewInit() {
-        this.updateScrollBarOffset();
         if (this.virtualScrollEnabled) {
             this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
                 const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay') as HTMLDivElement;
@@ -201,6 +189,18 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         }
     }
 
+    ngAfterViewChecked() {
+        if (this.virtualScrollEnabled && this.viewportRuler && this.virtualScroll.getRenderedRange().end > 0) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.ganttRoot.verticalScrollbarWidth =
+                        this.virtualScroll.elementRef.nativeElement.offsetWidth - this.virtualScroll.elementRef.nativeElement.clientWidth;
+                    this.cdr.markForCheck();
+                });
+            });
+        }
+    }
+
     private buildFlatItems() {
         const virtualData = [];
         if (this.groups.length) {
@@ -249,16 +249,6 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.viewportItems = [...this.viewportItems];
     }
 
-    private updateScrollBarOffset() {
-        if (this.ganttMainContent?.nativeElement) {
-            const ganttMainContainer = this.ganttMainContent.nativeElement;
-            const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
-            const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
-            this.verticalScrollbarWidth = verticalScrollbarWidth;
-            this.horizontalScrollbarHeight = horizontalScrollbarHeight;
-        }
-    }
-
     expandChildren(item: GanttItemInternal) {
         if (!item.expanded) {
             item.setExpand(true);
diff --git a/packages/gantt/src/root.component.ts b/packages/gantt/src/root.component.ts
index 0d633c59..1e05a912 100644
--- a/packages/gantt/src/root.component.ts
+++ b/packages/gantt/src/root.component.ts
@@ -10,7 +10,6 @@ import {
     Optional,
     OnDestroy,
     ViewChild,
-    AfterViewInit,
     HostListener
 } from '@angular/core';
 import { GanttDomService, ScrollDirection } from './gantt-dom.service';
@@ -31,7 +30,7 @@ import { GanttDate } from './utils/date';
         class: 'gantt'
     }
 })
-export class NgxGanttRootComponent implements OnInit, AfterViewInit, OnDestroy {
+export class NgxGanttRootComponent implements OnInit, OnDestroy {
     @Input() sideWidth: number;
 
     @ContentChild('sideTemplate', { static: true }) sideTemplate: TemplateRef<any>;
@@ -87,25 +86,18 @@ export class NgxGanttRootComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.ganttUpper.viewChange.pipe(startWith<null, null>(null), takeUntil(this.unsubscribe$)).subscribe(() => {
                     this.scrollToToday();
                 });
+                this.updateScrollBarOffset();
             });
         });
     }
 
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.updateScrollBarOffset();
-        });
-    }
-
     updateScrollBarOffset() {
-        if (this.mainTemplate?.elementRef) {
-            const ganttMainContainer =
-                this.mainTemplate.elementRef.nativeElement.previousElementSibling.querySelector('.gantt-main').firstChild;
-            const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
-            const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
-            this.verticalScrollbarWidth = verticalScrollbarWidth;
-            this.horizontalScrollbarHeight = horizontalScrollbarHeight;
-        }
+        // @ts-ignore
+        const ganttMainContainer = this.dom.mainContainer as HTMLElement;
+        const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
+        const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
+        this.verticalScrollbarWidth = verticalScrollbarWidth;
+        this.horizontalScrollbarHeight = horizontalScrollbarHeight;
     }
 
     ngOnDestroy(): void {