Oftentimes, we want to limit the width of an element relative to its parent, and at the same time, to make it dynamic. So having a base width or height with the ability to make it extend based on the available space. Let’s say, for example, that we have a button that should have a minimum width, where it shouldn’t go below it. This is where the maximum and minimum properties become handy.

Min-Width And Max-Width Properties
The first thing to discuss is width-related properties. We have min-width and max-width, and each one of them is important and has its use cases.

Min Width
When setting the value of min-width, its benefit lies in preventing the used value for width property from becoming less than the specified value for min-width. Note that the default value for min-width is auto, which resolves to 0.

Max Width
When setting the value of max-width, its benefit lies in preventing the used value for width property from becoming more than the specified value for max-width. The default value for max-width is none.