Back to Yoga

Min/Max Width and Height

website/docs/styling/min-max-width-height.mdx

2017.02.07.001.1 KB
Original Source

import Playground from '@site/src/components/Playground';

Min/Max Width and Height

These properties set the maximum and minimum size constraints of a node. 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 containing block's size. By default all these constraints are undefined.

<Playground code={<Layout config={{useWebDefaults: false}}> <Node style={{ width: 200, 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>} />