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

---
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 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](/docs/advanced/containing-block) 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>`} />