CSS min-width Property

Description

The min-width property sets the minimum width of an element. If the browser window in width becomes smaller than the specified minimum width of the element, then the width of the element remains unchanged, and a horizontal scroll bar appears in the window. The element width value will be calculated depending on the values of the set properties width, max-width and min-width.

Initial value: 0
Applies to: All elements except non-replaced inline elements and table elements
Inherited: No
Computed value: The percentage as specified or the absolute length
Animatable: Yes
JavaScript syntax: object.style.minWidth

Syntax

min-width: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content

Values

<length>Specifies a fixed width. Negative values are not allowed.
<percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
max-contentThe max-content width or height.
min-contentThe min-content width or height.
availableThe containing block width or height minus margin, border, and padding.
fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Example

HTML

<div class="test">The block in which the minimum width is set to 100px.</div> 

<br> 

<div class="test2">The block in which the minimum width is 100px and the maximum is 200px ..</div>

CSS

.test {
   min-width: 100px;
   background: khaki; 
}
.test2 {
   min-width: 100px;
   max-width: 200px;
   background: orange;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS min-width property.

Desktop

12	1	1	4	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 25th September 2023

Support Us