CSS min-width Property

The min-width property sets the minimum width an element is allowed to have, preventing it from shrinking smaller than the specified value.

selector { min-width: value; }
<length> Defines the minimum width using specific units like px, em, or rem.
<percentage> Sets the minimum width as a percentage of the containing block's width.
auto The default value which allows the browser to calculate the minimum width based on the context.
max-content The intrinsic preferred width based on the content inside the element.
min-content The intrinsic minimum width, often determined by the longest word or unbreakable element.
fit-content(<length-percentage>) Uses the fit-content formula with the available space replaced by the specified argument.
inherit Takes the min-width value from the parent element.
initial Sets the property to its default value of 0.

Code Examples

A basic fluid container that uses min-width to maintain a minimum readable size on mobile viewports.

<div style="width: 100%; min-width: 320px; background-color: #dddddd; padding: 20px; border: 2px solid #333333;">
  This box will take up the full width of its parent until it reaches 320px, then it will stop shrinking.
</div>

An advanced example showing how to dynamically toggle the minimum width floor and text color of a component using JavaScript.

<div id="adminPanel" style="width: 50%; min-width: 250px; background-color: #f4f4f4; padding: 15px; border: 1px solid #999999;">
  <p>Adjustable Sidebar</p>
  <button onclick="expandSidebar()">Toggle Minimum Width</button>
</div>

<script>
function expandSidebar() {
  const panel = document.getElementById("adminPanel");
  // Check the current min-width and toggle it
  if (panel.style.minWidth === "250px") {
    panel.style.minWidth = "500px";
    panel.style.color = "#ff0000";
  } else {
    panel.style.minWidth = "250px";
    panel.style.color = "#000000";
  }
}
</script>

Pro Tip

You can use min-width in Flexbox layouts to prevent flex items from shrinking past a certain point even when "flex-shrink" is active. This is perfect for a navigation sidebar that needs to maintain its icons and labels regardless of how much the main content area expands.

Deep Dive

Think of min-width as a physical floor for your element. If you set a width of 50%, that element will scale up and down as you resize your browser. However, without a floor, that element might become so skinny on a mobile phone that the content inside becomes a mangled mess. By applying min-width: 300px;, you are telling the browser: "You can shrink this element as much as the layout requires, but the moment you hit 300 pixels, stop shrinking." It effectively overrides the width property if the width tries to resolve to a value smaller than the floor you have set. This is a critical tool for creating responsive layouts that remain usable across all device sizes.

Best Practices

Use min-width to ensure that UI components like sidebars, cards, or buttons remain functional on small screens. Instead of hard-coding a fixed width, use a fluid width (like a percentage) combined with a min-width. This allows the element to grow with the screen but prevents it from collapsing into an unreadable state on mobile devices.

Common Pitfalls

A common mistake is trying to apply min-width to non-replaced inline elements like "span" or "a" tags. It will have no effect unless you change the display property to "block" or "inline-block". Also, be aware that if min-width is larger than max-width, the min-width value will usually take precedence, which can lead to unexpected layout overflow.

Accessibility

Setting a min-width can improve accessibility by preventing text containers from becoming too narrow, which makes reading difficult for users. However, be careful not to set a min-width that is wider than the viewport on small mobile devices, as this forces horizontal scrolling. Horizontal scrolling is generally considered a poor user experience and can be difficult for users with motor impairments to navigate.

Dev Data Table: min-width property

default 0
animatable yes
inherited no
experimental no
year_intro 1998
year_standard 2000
js_syntax_1 document.getElementById("myBox").style.minWidth = "200px";
js_syntax_2 document.getElementById("myBox").style.setProperty("min-width", "200px");
js_note When using the style object directly in JavaScript, you must use the camelCase version "minWidth" instead of the hyphenated CSS version.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "4", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "12" }
results render here...