From 6205338c3466edad4c89270dac67f92d1f07753b Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Tue, 12 Mar 2024 11:31:46 -0700
Subject: [PATCH] Add min max width height documentation (#1601)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1601

tsia

Reviewed By: NickGerleman

Differential Revision: D54780258

fbshipit-source-id: 6690e4d776b948ae0f8ae3e331f395bdada68089
---
 .../docs/examples/min-max-width-height.mdx    | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/website-next/docs/examples/min-max-width-height.mdx b/website-next/docs/examples/min-max-width-height.mdx
index 4991ded3..c7685eb0 100644
--- a/website-next/docs/examples/min-max-width-height.mdx
+++ b/website-next/docs/examples/min-max-width-height.mdx
@@ -2,4 +2,47 @@
 sidebar_position: 12
 ---
 
+import Playground from '@site/src/components/Playground';
+
 # Min/Max Width and Height
+
+These properties set the maximum and minimum size constraints of an element.
+They have higher priority than all other properties and will always be respected.
+Constraints can be specified as either absolute pixel values or as percentages of their
+parent's size. By default all these constraints are `undefined`.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 250,
+      height: 250,
+      padding: 10
+    }}>
+    <Node style={{margin: 5, height: 25}} />
+    <Node
+      style={{
+        margin: 5,
+        height: 100,
+        maxHeight: 25
+      }}/>
+    <Node
+      style={{
+        margin: 5,
+        height: 25,
+        minHeight: 50
+      }}/>
+    <Node
+      style={{
+        margin: 5,
+        height: 25,
+        maxWidth: 25
+      }}/>
+    <Node
+      style={{
+        margin: 5,
+        height: 25,
+        width: 25,
+        minWidth: 50
+      }}/>
+  </Node>
+</Layout>`} />