CSS min-width property is used to set minimum width of a box element. Few points to note about min-width
- It cannot be negative.
- If min-width is greater than max-width or width, then min-width value overrides them.
CSS property min-width
| CSS version: | CSS 2.1 |
| Value: | length | percentage | none | inherit |
| Initial: | 0 |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
Example – min-width pixel value
<style type="text/css">
.box {
min-width: 200px;
width: 10px; /* will be overridden */
max-width:10px; /* will be overridden */
height:100px;
background-color: lightgreen;
}
</style>
<div class="box">
min width 100px
</div>Example – min-width pecentage value
<style type="text/css">
.outer {
width: 300px; height:100px;
background-color: lightgray;
}
.box {
min-width: 50%;
width: 0; /* will be overridden */
height: 100px;
background-color: lightgreen;
}
</style>
<div class="outer">
<div class="box">
min width 50%
</div>
</div>
