diff --git a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss
index 5c623bf1e34..fa1b4379b0d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss
@@ -17,6 +17,7 @@
 
 %vhelper--horizontal {
     width: 100%;
+    height: var(--vhelper-scrollbar-size);
 }
 
 %vhelper-content--vertical {
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts
index d4e2e4f1d3a..76761163f9e 100644
--- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts
@@ -1486,10 +1486,11 @@ export class VirtualComponent {
     public isHorizontalScrollbarVisible() {
         const horizontalScrollbar = this.container.element.nativeElement.querySelector('igx-horizontal-virtual-helper');
         /**
-         * Due to current implementation the height is automatically calculated.
-         *  That's why when it's less than 16 there is no scrollbar
+         * The element height is set explicitly via CSS, so it is always present.
+         * Visibility is determined by whether the virtual content width exceeds the container width.
+         * BUG https://github.com/IgniteUI/igniteui-angular/issues/17216
          */
-        return horizontalScrollbar.offsetHeight >= 16;
+        return horizontalScrollbar.offsetWidth < horizontalScrollbar.children[0].offsetWidth;
     }
 }