Sizing
Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.
Supported values
The sizing style functions support different property input types:
Width 1/4
Width 300
Width 75%
Width 1
// Numbers in [0,1] are multiplied by 100 and converted to % values.
<Box sx={{ width: 1/4 }}>
<Box sx={{ width: 300 }}> // Numbers are converted to pixel values.
<Box sx={{ width: '75%' }}> // String values are used as raw CSS.
<Box sx={{ width: 1 }}> // 100%Width
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<Box sx={{ width: '25%' }}>…
<Box sx={{ width: '50%' }}>…
<Box sx={{ width: '75%' }}>…
<Box sx={{ width: '100%' }}>…
<Box sx={{ width: 'auto' }}>…Height
Height 25%
Height 50%
Height 75%
Height 100%
<Box sx={{ height: '25%' }}>…
<Box sx={{ height: '50%' }}>…
<Box sx={{ height: '75%' }}>…
<Box sx={{ height: '100%' }}>…API
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 |
boxSizing |
boxSizing |
box-sizing |
none |