The min-width property sets the minimum horizontal width of an element. It stops the used width from going smaller than the value you set.
It is not inherited. The initial value is auto. Content can still make the box grow wider. For a writing-mode-aware floor, use min-inline-size. Pair with max-width when you also need a cap.
Not deprecated. Length and percentage values are Baseline Widely available. stretch has limited support. The fit-content() function is experimental and not usable in browsers yet.
min-width: auto | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;Same value set as other size properties. Prefer lengths and percentages for everyday layouts.
| Value | Description | Try it |
|---|---|---|
auto | Default. Often 0 for blocks; content-based for flex/grid items | Try it |
<length> | Fixed floor such as 200px, 12rem, or 40vw | Try it |
<percentage> | Percent of the containing block’s width | Try it |
vs width | When the floor is larger than width, the floor wins | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s min-width | Try it |
min-widthSet a floor when short content should not collapse the box horizontally.
auto.max-width when you also need an upper limit.| Piece | Required? | Role |
|---|---|---|
| Block-level or replaced box | Yes | Does not apply to non-replaced inline elements |
min-width value | Yes | auto, length, percentage, or keyword |
| Parent width | For % | Percentage uses the containing block width |
width / max-width | Optional | Preferred size and upper cap; the floor can override a smaller width |
Change min-width on a short label. The sample text is short on purpose so you can see the floor.
Each snippet focuses on min-width. Use Try It Yourself for a live editor.
Give a short label a 200px minimum so it does not collapse.
<style>
div {
min-width: 200px;
}
</style>
<div>Hi</div>200px is the smallest width allowed.rem, em, ch, or vw the same way.Keep a child at least half of the parent’s width.
<style>
.parent {
width: 320px;
}
.child {
min-width: 50%;
}
</style>
<div class="parent">
<div class="child">At least half</div>
</div>320px defines the containing block.50% resolves to a 160px floor here.When min-width is larger than width, the used width becomes the floor.
<style>
div {
width: 80px;
min-width: 200px;
}
</style>
<div>Floor wins</div>width: 80px is the preferred size.min-width: 200px is larger than that preferred size.max-width, the floor still wins.Most confusion is about growth, mixing with width, and flex/grid auto minima.
min-width can beat widthWhen the floor is larger than width or max-width, the used width becomes the min-width value.
auto is content-basedOn flex and grid items, min-width: auto can stop shrinking below content size. Set min-width: 0 when you need overflow or shrink behavior.
Percentages resolve against the parent’s width. Make that width clear when you rely on a percentage floor.
box-sizing still appliesWith border-box, padding and border count inside the size. With content-box, they add outside it.
min-width is a browser layout property. Node.js, Deno, and Bun do not apply it.
Length and percentage values work in all modern browsers and older ones. Intrinsic keywords are widely supported in current engines. stretch is limited; fit-content() is not usable yet.
Bottom line: Safe for every modern site. Prefer lengths and percentages for everyday work. Treat stretch as limited and fit-content() as experimental.
auto, lengths, and percentages of the parent width.auto. Not inherited. A larger floor overrides a smaller width.min-inline-size when the floor should follow writing mode.One line: min-width is a horizontal floor — not a fixed width, and not a maximum.
Learn how an element’s content blends with the backdrop behind it.
5 people found this page helpful