Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.

Width

<Box width="25%">…
<Box width="50%">…
<Box width="75%">…
<Box width="100%">…
<Box width="auto">…

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Height

<Box height="25%">…
<Box height="50%">…
<Box height="75%">…
<Box height="100%">…

Height 25%

Height 50%

Height 75%

Height 100%

import { sizing } from '@material-ui/system';

Import name	Prop	CSS property	Theme key
`width`	`width`	`width`	none
`maxWidth`	`maxWidth`	`max-width`	none
`minWidth`	`minWidth`	`min-width`	none
`height`	`height`	`height`	none
`maxHeight`	`maxHeight`	`max-height`	none
`minHeight`	`minHeight`	`min-height`	none