Setting Fixed Widths
Any element can be given a set width using absolute CSS measurement units like
rem. However, if the browser or container shrinks to smaller than the size set for the element, the element overflows / sticks out of the container. If it is the browser window that is too small, a horizontal scrollbar appears.
Try resizing the example above by grabbing the bottom right corner and dragging. Notice how the content fails to resize based on the size of the preview window.
One solution is to use a percent (
%) value for the width. No matter how the container resizes, the element always resizes to occupy the given percentage of the container's width.
Resize the preview window above by grabbing and dragging the bottom right corner to see how this content responds. Try changing the percentage size of the
width value to see how the content behaves.
Max-Width & Min-Width
Percentage widths can be problematic if the width of the container is not set—the element will keeps as the browser grows, past the point of looking good. The solution to this is to use the
max-width property instead of the
width property. With
max-width, the element remains fluid and respond to the size of the container if the container is smaller than the size specified, but it doesn't grow beyond that size. It is an upper limit to the size of the element.
Resize the preview window above to see how this example responds. Notice how the content is fluid up until it reaches 25rem, but then grows no wider. Try changing the
min-width property sets a lower limit to the width of the element.
Resize the preview window above to see how this example responds. Notice how the content reflows to fit in the window until it is less than 24rem wide, but then it refuses to shrink further. Try changing the
width and its related properties, similar properties exist for
min-height, which all behave as you would expect. However,
height properties should be used with caution because they can interfere with the natural flow of content vertically down the page.
Notice how the content spills out of the background because there is not enough height allowed. Try changing the
min-height value. How do you think it will behave if you change it to
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.