Class Reference
Size
Class Reference
Size
Element sizes, widths, heights and viewport sizing.
How to use
Use width-full for a container that fills its parent. Set minimum or maximum dimensions when content should be allowed to grow. Viewport height classes are useful for full-height sections.
Responsive behavior
Percentage sizes depend on the parent. vh, svh and dvh describe different viewport heights; check the unit shown below before choosing a screen-height class.
Visual reference
Blue elements show the installed sizing classes. Dashed outlines mark the parent boundaries. Large examples can be scrolled so you can compare their width and height.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The square uses the installed size variable without scaling. Very small tokens appear as a dot.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The target flex item may shrink below its content width; the sibling keeps 35% of the parent.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The target may shrink below its content height to leave room for the fixed-height sibling. The parent clips excess content.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed parent is 200px tall. Percentage heights resolve against that parent; viewport units use your browser height.
The dashed frame is the parent width. The sample starts at 150% width; this class sets its maximum.
The dashed frame is the parent width. The sample starts at 150% width; this class sets its maximum.
The dashed frame is the parent width. The sample starts at 150% width; this class sets its maximum.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed parent is 200px tall. The sample starts at 320px height; this class sets its maximum.
The dashed parent is 200px tall. The sample starts at 320px height; this class sets its maximum.
The dashed parent is 200px tall. The sample starts 80px taller than the browser viewport; this class sets its maximum.
The dashed parent is 200px tall. The sample starts 80px taller than the browser viewport; this class sets its maximum.
The dashed parent is 200px tall. The sample starts 80px taller than the browser viewport; this class sets its maximum.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
Content is 160px wider and 100px taller than its parent. Scroll where the class allows it; visible overflow extends beyond the dashed boundary.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
The same 4:3 image sits in a wide, 200px-high frame. Compare cropping, empty space, and stretching.
The same 4:3 image sits in a wide, 200px-high frame. Compare cropping, empty space, and stretching.
The same 4:3 image sits in a wide, 200px-high frame. Compare cropping, empty space, and stretching.
The same 4:3 image sits in a wide, 200px-high frame. Compare cropping, empty space, and stretching.
The same 4:3 image sits in a wide, 200px-high frame. Compare cropping, empty space, and stretching.
A consistent starting width makes the ratios comparable. Auto uses the sample’s 120px content height.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.
The dashed frame is the parent width. The installed class controls the blue element’s width.