Fluid Width
Because users might be viewing a web page on virtually any size of device or browser window, it is important to ensure content fits within their viewport. Fluid design is one technique for dealing with this by allowing content to scale and reflow automatically based on the size of the container.
Setting Fixed Widths
Any element can be given a set width using absolute CSS measurement units like px or 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.
Percentage Widths
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
max-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 max-width value.
min-width
Similarly, 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 min-width value.
Height Properties
Similar to width and its related properties, similar properties exist for height, max-height, and 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 min-height instead?
Video Lesson
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.