From d0658cd781f82c67ce1a743b6be2e9b95ba06e5a Mon Sep 17 00:00:00 2001
From: Weronika Olejniczak <weronika.olejniczak@elastic.co>
Date: Thu, 27 Feb 2025 11:37:29 +0100
Subject: [PATCH] feat(website): add Utilities > Auto Sizer page

---
 .../docs/components/utilities/auto_sizer.mdx  | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/website/docs/components/utilities/auto_sizer.mdx

diff --git a/packages/website/docs/components/utilities/auto_sizer.mdx b/packages/website/docs/components/utilities/auto_sizer.mdx
new file mode 100644
index 00000000000..c9ed13911eb
--- /dev/null
+++ b/packages/website/docs/components/utilities/auto_sizer.mdx
@@ -0,0 +1,56 @@
+---
+slug: /utilities/auto-sizer
+id: utilities_auto_sizer
+---
+
+# Auto sizer
+
+`EuiAutoSizer` helps components that use virtualized rendering and/or require explicit dimensions to fill all available space in the parent container. See the [react-virtualized AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md) documentation as `EuiAutoSizer` is a passthrough component for `AutoSizer`.
+
+<Demo>
+  ```tsx
+  import React from 'react';
+  import { css } from '@emotion/react';
+
+  import {
+  EuiAutoSizer,
+  EuiAutoSize,
+  EuiCode,
+  EuiPanel,
+  logicalSizeCSS,
+  } from '@elastic/eui';
+
+  export default () => {
+    const containerStyles = css`
+      ${logicalSizeCSS('100%', '200px')}
+    `;
+
+    const panelStyles = css`
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+
+    return (
+      <div css={containerStyles}>
+        <EuiAutoSizer>
+          {({ height, width }: EuiAutoSize) => (
+            <EuiPanel css={[panelStyles, { height, width }]}>
+              <EuiCode>
+                height: {height}, width: {width}
+              </EuiCode>
+            </EuiPanel>
+          )}
+        </EuiAutoSizer>
+      </div>
+    );
+  };
+  ```
+</Demo>
+
+## Props
+
+import docgen from '@elastic/eui-docgen/dist/components/auto_sizer';
+
+<PropTable definition={docgen.EuiAutoSizer} />