Files
yoga/website-next/docs/styling/min-max-width-height.mdx
Nick Gerleman 066e366246 Fill out "About Yoga", "Laying out a Yoga tree" , and "Styling" (#1591)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1591

Adds initial documentation to these sections.

Reviewed By: joevilches

Differential Revision: D54708141

fbshipit-source-id: b2c1ac20573840833a3e5fde8c7b53f2770cecbd
2024-03-12 15:17:57 -07:00

49 lines
1.0 KiB
Plaintext

---
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>`} />