Sizing

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

Supported values

The sizing properties: width, height, minHeight, maxHeight, minWidth, and maxWidth are using the following custom transform function for the value:

function transform(value) {
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}

If the value is between (0, 1], it's converted to percent. Otherwise, it is directly set on the CSS property.

Width 1/4

Width 300

Width 75%

Width 1

import Box from '@mui/material/Box';

export default function Values() {
  return (
    <Box sx={{ width: '100%' }}>
      <Box
        sx={(theme) => ({
          width: 1 / 4,
          p: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 1/4
      </Box>
      <Box
        sx={(theme) => ({
          width: 300,
          p: 1,
          my: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 300
      </Box>
      <Box
        sx={(theme) => ({
          width: '75%',
          p: 1,
          my: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 75%
      </Box>
      <Box
        sx={(theme) => ({
          width: 1,
          p: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 1
      </Box>
    </Box>
  );
}

<Box sx={{ width: 1/4 }}> // Equivalent to width: '25%'
<Box sx={{ width: 300 }}> // Numbers above 1 are treated as pixel values.
<Box sx={{ width: '75%' }}> // String values are used as raw CSS.
<Box sx={{ width: 1 }}> // 100% -- numbers in the range `(0, 1]` are treated as percentage values from 0 to 100%.

Width

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

import Box from '@mui/material/Box';

export default function Width() {
  return (
    <Box sx={{ width: '100%' }}>
      <Box
        sx={(theme) => ({
          width: '25%',
          p: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 25%
      </Box>
      <Box
        sx={(theme) => ({
          width: '50%',
          p: 1,
          my: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 50%
      </Box>
      <Box
        sx={(theme) => ({
          width: '75%',
          p: 1,
          my: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 75%
      </Box>
      <Box
        sx={(theme) => ({
          width: '100%',
          p: 1,
          my: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width 100%
      </Box>
      <Box
        sx={(theme) => ({
          width: 'auto',
          p: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Width auto
      </Box>
    </Box>
  );
}

<Box sx={{ width: '25%' }}>…
<Box sx={{ width: '50%' }}>…
<Box sx={{ width: '75%' }}>…
<Box sx={{ width: '100%' }}>…
<Box sx={{ width: 'auto' }}>…

Max-width

The max-width property allows setting a constraint on your breakpoints. In this example, the value resolves to theme.breakpoints.values.md.

<Box sx={{ maxWidth: 'md' }}>…

Height

Height 25%

Height 50%

Height 75%

Height 100%

import Box from '@mui/material/Box';

export default function Height() {
  return (
    <Box sx={{ height: 100, width: '100%' }}>
      <Box
        sx={(theme) => ({
          height: '25%',
          width: 120,
          display: 'inline-block',
          p: 1,
          mx: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Height 25%
      </Box>
      <Box
        sx={(theme) => ({
          height: '50%',
          width: 120,
          display: 'inline-block',
          p: 1,
          mx: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Height 50%
      </Box>
      <Box
        sx={(theme) => ({
          height: '75%',
          width: 120,
          display: 'inline-block',
          p: 1,
          mx: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Height 75%
      </Box>
      <Box
        sx={(theme) => ({
          height: '100%',
          width: 120,
          display: 'inline-block',
          p: 1,
          mx: 1,
          bgcolor: 'grey.100',
          color: 'grey.800',
          border: '1px solid',
          borderColor: 'grey.300',
          borderRadius: 2,
          fontSize: '0.875rem',
          fontWeight: '700',
          textAlign: 'center',
          ...theme.applyStyles('dark', {
            bgcolor: '#101010',
            color: 'grey.300',
            borderColor: 'grey.800',
          }),
        })}
      >
        Height 100%
      </Box>
    </Box>
  );
}

<Box sx={{ height: '25%' }}>…
<Box sx={{ height: '50%' }}>…
<Box sx={{ height: '75%' }}>…
<Box sx={{ height: '100%' }}>…

API

import { sizing } from '@mui/system';

Import name	Prop	CSS property	Theme key
`width`	`width`	`width`	none
`maxWidth`	`maxWidth`	`max-width`	`theme.breakpoints.values`
`minWidth`	`minWidth`	`min-width`	none
`height`	`height`	`height`	none
`maxHeight`	`maxHeight`	`max-height`	none
`minHeight`	`minHeight`	`min-height`	none
`boxSizing`	`boxSizing`	`box-sizing`	none