---
name: Sizing principle
route: /principle-sizing/
---
import { Playground } from 'docz';
import { Vertical, Horizontal, Stretch, Content, Box } from '../..';
import * as demos from '../../demos';
# Sizing
When thinking about the size of a container you need to think about *explicit* size and *implicit* sizing. We cover these concepts below.
## SizeProps (Explicit size)
```ts
/**
* Add support for explicit size
*/
export interface SizeProps {
height?: CSSLength,
minHeight?: CSSLength,
maxHeight?: CSSLength,
width?: CSSLength,
minWidth?: CSSLength,
maxWidth?: CSSLength,
}
```
Explicit sizes are driven by `width,height,minHeight,minWidth,maxHeight,maxWidth` arguments. You can have an explicit value on only one dimension e.g. here we have a simple `Vertical` container with explicit `height` only:
Hello world
This is essentially what you are doing in most design tools out there. Sadly explicit `height+width` sizing does not scale to *real* applications, where sizes need to be reactive to either their parent or their content. Fortunately we provide concepts to handle these cases with ***implicit sizing*** concepts we cover next.
## SizingProp (Implicit sizing)
> Implicit sizing controls the component behaviour when no explicit size properties are provided.
The `SizingProp` is what controls the implicit sizing (content / stretch / stretch-ratio) features:
```ts
/**
* Specifies sizing interaction
*/
export interface SizingProp {
/**
* Specifies `sizing` interaction
*/
sizing?:
| 'content' /** default */
| 'stretch' /** Same as `1` */
| number /** A stretch ratio */;
}
```
We cover these individually below:
### Content sized
A content sized component takes up as much space as needed by the children. This is the most common sizing that you want and is therefore the default for our containers.
In the example below, we have an explicit sized `Vertical` (background `lightskyblue`) with an inner content-sized `Vertical` (background `darkorange`). The inner vertical keeps it size to match whatever is needed by its children (observed below as you see the background of the parent-lightskyblue where the child-darkorange ends).
I'm taking up as much space as needed by my children
> You can set sizing to `content` explicitly as well if you want (`sizing={'content'}`)
### Stretch sized
A stretch sized component takes up as much space as offered by the parent.
In the example below, we have an explicit sized `Vertical` (background `lightskyblue`) with an inner stretch-sized `Vertical` (background `darkorange`). The inner vertical keeps its size to match that of the outer container (observed below as you don't see the background of the parent-lightskyblue as it is filled in by the child-darkorange).
I'm taking up all the space from the parent
### Stretch ratios
With stretch sizing, you can specify `number` values. This controls how much you want different items dividing the space provided by their parent. e.g. We have `1` and `2` as the sizing on the children of the following horizontal:
I'm taking 1
I'm taking 2
## Mixing
You can mix `Stretch`, `Content` and explicit sizing to match your design requirements as shown in the example below (`explicit,content,stretch 1,stretch 2`):
{/* Explicit width 100 */ }
Exactly 100px
{/* Implicit content */ }
As much as I need
{/* Implicit stretch sizing = 1 */ }
I'm taking 1 from remainder
{/* Implicit stretch sizing = 2 */ }
I'm taking 2 from remainder
## Additional Guidance
### Explicit Size requires sizing='content'
`sizing=stretch` takes precedence on any explicit sizing e.g. `width` has no effect in the following example:
{/* Explicit width 100 */ }
Width 100px will not work because of `sizing=stretch`
For for explicit size to work sizing needs to be `content`. All our components are `sizing=content` by default so you don't need to think about it when using our components. The following example demonstrates this default:
{/* Explicit width 100 */ }
Width 100px works