min/max width/height with multiple values

Question

Edit in 2020 (min, max, clamp functions)

To anyone who get here by search engines:

CSS min / max / clamp functions had got some supports in recent (2020) bro

Answer 1

create separate classes and add them dynamically based on outerWidth()

.some_element {
        background: red;
        float: left;
        width: auto;
    }

    .widthClass1{
     max-width:50%;
    }

    .widthClass2{
     max-width:200px;
    }


    $(document).ready(function(){
       if($("textDiv").outerWidth()<400){//instead of dividing by 2 I am comparing with 400
         $("textDiv").addClass('widthClass1')
       }else{
         $("textDiv").addClass('widthClass2')
       }
    });