CSS propertyBox model
min-width
Sets a minimum width the element won’t shrink below.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- all elements except non-replaced inline elements (e.g. `<span>`), table rows, and row groups
- JavaScript
element.style.minWidth = "200px"
Example
#CSS
.button {
min-width: 120px;
padding: 8px 16px;
}Example HTML
<div class="stage">
<button class="button">OK</button>
<button class="button">Save changes</button>
</div>Preview
Definition and usage
#The min-width property keeps an element from becoming narrower than the given value, even if width or a flex layout tries to squeeze it. When the two conflict, min-width wins.
It’s handy for buttons and labels that shouldn’t get too narrow, and in flex layouts where items shrink to fit a row.
On a flex item, the default minimum width is, in practice, the width of its longest word. Setting min-width: 0 lets such an item shrink further, for example so a text-overflow ellipsis can kick in.
Syntax
#Syntax
min-width: auto | <length> | <percentage> | min-content | max-content;Values
#Values in practice
#auto
No extra constraint. The element is 40px wide, from
width..demo { min-width: auto; }160px
The element won’t shrink below 160px, despite
width: 40px..demo { min-width: 160px; }50%
At least half the parent’s width.
.demo { min-width: 50%; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- When text in a flex item won’t truncate with an ellipsis, add
min-width: 0to that item. - Buttons with an equal minimum width look tidier grouped together.
Related entries
#Spotted a mistake or missing an example? Write to us.