diff --git a/packages/dev/docs/pages/react-spectrum/styling.mdx b/packages/dev/docs/pages/react-spectrum/styling.mdx
index f52f6559401..d80bb0c507f 100644
--- a/packages/dev/docs/pages/react-spectrum/styling.mdx
+++ b/packages/dev/docs/pages/react-spectrum/styling.mdx
@@ -108,6 +108,15 @@ ReactDOM.render(<DimensionViewer />, document.getElementById('dimension-viewer')
 
 <div id="dimension-viewer" />
 
+### CSS functions
+
+Dimension variables may also be used as part of CSS functions like `calc()`, `min()`, and `max()`. This can be done by simply referring to the variable within the CSS expression.
+For example, you could make an element take up 100% of the width of it's container minus a certain dimension value.
+
+```tsx example
+<View width="calc(100% - size-2000)" height="single-line-height" backgroundColor="green-500" />
+```
+
 ## Responsive styles
 
 In addition to static values, all style props support object syntax to specify different values for the prop depending on the