Search code examples
cssoverflowmaxlength

Css element Max-Size

What is major differences in using these css rules

div{width:100px; overflow:hidden;}

And

div{max-width:100px; overflow:hidden!important;}

Is there going to be any cross-compatibility Issues.

Solution

  • max-width is great for stating "don't go any bigger than this, but it's OK if it's smaller".

    This might be great if you were doing say a speech bubble that could be dynamic in size (depending on content) and you wanted the div surrounding speech bubble to vary.

    width on the other hand says "the must be 100px", which means even if the content within the div is smaller, the surrounding div will still be 100px.

    Example: http://cdn.gottabemobile.com/wp-content/uploads/2013/10/photo1.png