1. css
  2. /properties
  3. /min-width

min-width

Definition

The min-width property sets the minimum width of an element. If the content inside an element is narrower than the specified minimum width, the element's width will be expanded to accommodate the content. However, if the content inside an element is wider than the specified minimum width, the min-width property will have no effect.

Examples

Setting a minimum width for a div element:

div {
  min-width: 200px;
}

Setting a minimum width for an image:

img {
  min-width: 50%;
}

Setting a minimum width for a table cell:

td {
  min-width: 100px;
}

Values

ValueDescription
<length>Specifies the minimum width in pixels or other absolute or relative units.
<percentage>Specifies the minimum width as a percentage of the containing block's width.
autoDefault value. The element's width is determined by its content.
inheritInherits the min-width property from the parent element.
initialSets the min-width property to its default value.
unsetInherits the min-width property from the parent element, or sets it to its default value if there is no parent.

Best Practices

  • Use min-width to ensure that an element has a minimum width and does not become too narrow.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • Use max-width to set a maximum width for an element, if needed.
  • Avoid setting min-width on elements that are meant to be fluid and should adjust to their content.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes