diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
index 9a465c0..72b0667 100644
--- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
@@ -43,16 +43,11 @@ interface OverflowOption {
   y: OverflowBehavior;
 }
 
-interface ViewportArrangeCustomCssProps {
-  '--viewport-arrange-width': string;
-  '--viewport-arrange-height': string;
-}
-
 const overlaidScrollbarsHideOffset = 42;
 
 export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
   const { _structureSetup, _doViewportArrange, _getViewportPaddingStyle, _getPaddingInfo } = lifecycleHub;
-  const { _host, _padding, _viewport, _viewportArrange } = _structureSetup._targetObj;
+  const { _host, _padding, _viewport, _content, _viewportArrange } = _structureSetup._targetObj;
   const { _update: updateContentScrollSizeCache, _current: getCurrentContentScrollSizeCache } = createCache<
     WH<number>,
     ContentScrollSizeCacheContext
@@ -78,7 +73,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
 
   const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => {
     style(_viewport, {
-      maxHeight: '',
+      height: '',
     });
 
     if (heightIntrinsic) {
@@ -91,7 +86,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
 
       style(_viewport, {
-        maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
+        height: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingAbsoluteVertical,
       });
     }
   };
@@ -193,7 +188,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
           }
         }
       } else {
-        style<ViewportArrangeCustomCssProps>(_viewport, {
+        style<'--viewport-arrange-width' | '--viewport-arrange-height'>(_viewport, {
           '--viewport-arrange-width': arrangeSize.w,
           '--viewport-arrange-height': arrangeSize.h,
         });
@@ -232,18 +227,19 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     }
   };
 
-  const undoOverlaidScrollbarsHiding = () => {
-    const paddingStyle = _getViewportPaddingStyle();
-    const viewportStyle = {
-      marginTop: '',
-      marginRight: '',
-      marginBottom: '',
-      marginLeft: '',
-      ...paddingStyle,
-    };
-    const prevStyle = style(_viewport, keys(viewportStyle));
+  const undoOverlaidScrollbarsHiding = (adjustFlexboxGlue?: boolean) => {
+    let paddingStyle = _getViewportPaddingStyle();
+
+    if (adjustFlexboxGlue) {
+      paddingStyle = {
+        ...paddingStyle,
+        height: '',
+      };
+    }
+
+    const prevStyle = style(_viewport, keys(paddingStyle));
     removeClass(_viewport, classNameViewportArrange);
-    style(_viewport, viewportStyle);
+    style(_viewport, paddingStyle);
 
     return () => {
       style(_viewport, prevStyle);
@@ -281,7 +277,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     }
 
     if (_sizeChanged || _paddingStyleChanged || _contentMutation || directionChanged) {
-      const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding() : noop;
+      const redoOverlaidScrollbarsHiding = viewportArrange ? undoOverlaidScrollbarsHiding(adjustFlexboxGlue) : noop;
       const contentSize = clientSize(_viewport);
       const viewportRect = getBoundingClientRect(_viewport);
       const viewportOffsetSize = offsetSize(_viewport);
diff --git a/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts
index d68cd34..31ca241 100644
--- a/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts
+++ b/packages/overlayscrollbars/src/lifecycles/structureLifecycle.ts
@@ -61,9 +61,9 @@ export const createStructureLifecycle = (lifecycleHub: LifecycleHub): Lifecycle
       style(_padding, {
         top: paddingStyle.t,
         left: paddingStyle.l,
-        'margin-right': paddingStyle.r,
-        'margin-bottom': paddingStyle.b,
-        'max-width': `calc(100% + ${paddingStyle.r * -1}px)`,
+        marginRight: paddingStyle.r,
+        marginBottom: paddingStyle.b,
+        maxWidth: `calc(100% + ${paddingStyle.r * -1}px)`,
       });
     }
 
diff --git a/packages/overlayscrollbars/src/overlayscrollbars.scss b/packages/overlayscrollbars/src/overlayscrollbars.scss
index ba732b0..f4dee70 100644
--- a/packages/overlayscrollbars/src/overlayscrollbars.scss
+++ b/packages/overlayscrollbars/src/overlayscrollbars.scss
@@ -90,15 +90,15 @@
 .os-padding {
   position: relative;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
 }
 
 .os-padding,
 .os-viewport {
   box-sizing: border-box;
   position: relative;
-  flex: auto;
+  flex: auto !important;
   height: auto;
   width: 100%;
   padding: 0;
@@ -106,21 +106,20 @@
   border: none;
   overflow: visible;
   max-width: 100%;
-  z-index: 0;
 }
 
 .os-viewport {
   --viewport-arrange-width: 0;
   --viewport-arrange-height: 0;
-}
 
-.os-viewport-arrange::before {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  z-index: -1;
-  min-width: 1px;
-  min-height: 1px;
-  width: var(--viewport-arrange-width);
-  height: var(--viewport-arrange-height);
+  &.os-viewport-arrange::before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+    min-width: 1px;
+    min-height: 1px;
+    width: var(--viewport-arrange-width);
+    height: var(--viewport-arrange-height);
+  }
 }
diff --git a/packages/overlayscrollbars/src/typings.ts b/packages/overlayscrollbars/src/typings.ts
index 06a1bd7..c18f5bc 100644
--- a/packages/overlayscrollbars/src/typings.ts
+++ b/packages/overlayscrollbars/src/typings.ts
@@ -1,7 +1,7 @@
 export type PlainObject<T = any> = { [name: string]: T };
 
-export type StyleObject<CustomCssProps = {}> = {
-  [K in keyof (CSSStyleDeclaration & CustomCssProps)]?: string | number;
+export type StyleObject<CustomCssProps = ''> = {
+  [Key in (keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : ''))]?: string | number;
 }
 
 export type InternalVersionOf<T> = {
diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
index 761d423..6d670e2 100644
--- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
@@ -4,7 +4,7 @@ import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, cl
 import { OverlayScrollbars } from 'overlayscrollbars/OverlayScrollbars';
 
 const targetElm = document.querySelector('#target') as HTMLElement;
-window.os = OverlayScrollbars({ target: targetElm, padding: null });
+window.os = OverlayScrollbars({ target: targetElm, padding: null, content: null });
 
 export const resize = (element: HTMLElement) => {
   const strMouseTouchDownEvent = 'mousedown touchstart';
diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
index 14b0d92..64e94b1 100644
--- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
@@ -35,7 +35,7 @@ body {
   min-width: 200px;
   max-height: 300px;
   max-width: 320px;
-  //padding: 5px 50px 15px 20px;
+  padding: 5px 50px 15px 20px;
 }
 
 #resize {
diff --git a/packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts b/packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts
index e5347cf..cd08e6f 100644
--- a/packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts
+++ b/packages/overlayscrollbars/tests/jsdom/support/dom/style.test.ts
@@ -36,8 +36,10 @@ describe('dom style', () => {
         style(document.body, { width: '123px' });
         expect(document.body.style.width).toBe('123px');
 
+        interface O {}
+
         expect(document.body.style.getPropertyValue('--custom')).toBe('');
-        style(document.body, { '--custom': '123px' });
+        style<'--custom'>(document.body, { '--custom': '123px' });
         expect(document.body.style.getPropertyValue('--custom')).toBe('123px');
       });
 
@@ -60,7 +62,7 @@ describe('dom style', () => {
         expect(document.body.style.zIndex).toBe('');
         expect(document.body.style.lineHeight).toBe('');
         expect(document.body.style.getPropertyValue('--custom')).toBe('');
-        style(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' });
+        style<'--custom'>(document.body, { width: '123px', height: 321, opacity: '0.5', zIndex: 1, '--custom': '123px' });
         expect(document.body.style.width).toBe('123px');
         expect(document.body.style.height).toBe('321px');
         expect(document.body.style.opacity).toBe('0.5');