min-width
The minimum width: the element cannot become narrower.
Syntax
min-width: value;Values
| Parameter | Type | Description |
|---|---|---|
| px | length | A minimum in pixels. |
| % | percentage | A percentage of the parent's width. |
| 0 | number | Lets a flex or grid item shrink below the width of its content. |
Examples
Buttons of at least the same width:
<style>
.btn { min-width: 120px; padding: 6px; }
</style>
<button class="btn">OK</button>
<button class="btn">Cancel</button>
<button class="btn">Save and continue</button>Notes
Flex items have min-width: auto by default, so a long word or a wide table can stop them from shrinking. min-width: 0 on the item fixes this common bug.
See also
- max-width — The maximum width: the element can be narrower, but never wider.
- width — The width of an element.
- flex-shrink — How much a flex item shrinks when there is not enough space.
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.