It should be noted that min-width and width values should not be applied to the same element if they use the same unit, as one will override the other. For example, if the width is set to 150px and the min-width is set to 60px, the actual width of the element is 150px, and the min-width declaration becomes redundant:

#example {
  min-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 150px.

However, it’s acceptable to set both min-width and width when their values are given in different units:

#example {
  min-width: 3em;
  width: 138px;
}

As the min-width is based on em units, at some stage, due to text resizing (for example), the em width may be larger than the 138px width we’ve set. In cases such as this, the element will be allowed to expand further than the 138px width, thus accommodating the resizing of the em-based text.