CSS min-width Property
FREE
Overview
The min-width property specifies the minimum width of an HTML element. The width's value cannot be smaller than the width's minimum value. The min-width property preserves the set minimum width even if the content supplied within the element is less and is ineffective if the content is larger than the minimum width.
NOTE : No matter where we place the min-width property in our declaration, it overrides the width property.
Syntax for CSS min-width Property
The CSS min width property accepts keyword values such as auto, max-content, min-content, etc. It supports numeric values such as length in px, em, and percentage.
In the further sections of the article, we will discuss the values that the min-width property supports in more detail .
Property Values of CSS min-width
| Value | Description | Syntax |
|---|---|---|
| It defines the minimum width in px, cm, etc. | min-width: | |
| It specifies the minimum width in percent of the containing block | min-width: | |
| auto | The browser will calculate and select a min-width for the specified element with an auto value. | min-width |
| max-content | The max-content value indicates the content's intrinsic maximum width. In the case of text-content, this means that even if the content overflows, it will not wrap. | min-width |
| min-content | A min-content sizing keyword specifies the content's intrinsic minimum width. The text content will take advantage of all soft-wrapping opportunities, resulting in the smallest possible size. | min-width |
| fit-content | The fit-content value uses the fit-content formula with the available space replaced by the argument, i.e., min(max-content, max(min-content, argument)). | min-width: fit-content(20em); |
Examples of CSS min-width
Setting Minimum Element w=Width
In this example, we'll set the minimum element width using the various values supported by the min-width property.
HTML:
CSS :
OUTPUT:
By using max-content, the text inside the fifth container is rendered as a single long line without breaking at any soft breakpoints.
Browser Support
The following browsers support the CSS min width property:
| Browser | Version |
|---|---|
| Google Chrome | 1.0 |
| Safari | 1.0 |
| Mozilla Firefox | 1.0 |
| Microsoft Edge | 12.0 |
| Opera | 4 |
| Chrome Android | 18 |
| Firefox for Android | 4 |
| Opera Android | 10.1 |
| Safari on iOS | 1 |
| Samsung Internet | 1.0 |
| WebView Android | 4.4 |
Conclusion
- The min-width property in CSS defines the minimum width of an element.
- The CSS min width property preserves the set minimum width even if the content supplied within the element is less.
- The min-width property doesn't work if the content is larger than the minimum width.
- The CSS min width property takes keyword values such as auto, max-content, min-content, etc.
- It supports numeric values such as length in px, em, and percentage.
Related Properties
- CSS width property
- max-height in CSS
- min-height in CSS