If max-width
is smaller than width
,
the max-width
value takes precedence and
restricts the width of the element, even if
the width
property suggests a larger width
for the element.

In the above example, the first container Div 1
has a width of 50%, while the second container Div 2
has a width of 50% with a maximum width of 250px.
The max-width
property ensures that the second
container won't expand beyond 250 pixels in width,
even if the content inside it is wider.
You can play around with this code by opening it in the NeetoCode editor.