Width, Min-width, Max-width: Differences & Usage
I wrote an article covering the difference of height, min-height and max-height. Interestingly, width has quite different properties from height. This article will cover the different types of width and how to use them.
Checkout my other article if you want to understand height, min-height and max-height better!
Width
This is the exact width I want & I want to take up designated space initially
If you want an element to have a certain width no matter how much the screen is resized, use width to provide a definite value. Furthermore, width will take up the exact value even when the element is empty.
Min-width
It should be at least bigger than this width & I want to take up space the whole space initially
If you want an item to shrink depending on the screen resizing, but to maintain at least a certain width, use min-width. Like width, min-width will take up space even when the element is empty. min-width will stretch to fit the whole screen initially.
Max-width
It can’t be bigger than this width & I want to take up designated space initially
If you want an item to shrink or increase depending on the screen resizing, but don’t want it to increase at a certain point, use max-width. max-width will take up the maximum designated width initially.
Priority
width < max-width < min-width
When defining multiple width attributes, the priority is taken in this order.
Overriding Flexbox & Resizable content
In Flexbox, items will shrink to fit the parent container. In this situation, width will not have an effect. Use min-width to override the shrinking!
Also, for resizable content that has size that could be changed by the user, use min-width and max-width to lock in the size.
Responsive Design Practices
Usually, min-width is used as the breakpoint for different screen sizes, and max-width is used as how wide the element should be at that given screen size.
Tailwind CSS provides some great examples of this implementation. Tailwind uses mobile-screen first width as the default width, then overrides at larger breakpoints.
If you’re not familiar with Tailwind syntax, take a look at my CodePen below.
