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) browsers. You may try max-width: min(200px, 50%);. You can have a look at these CSS functions while be careful about compatibility issues.

---

Original post:

I want limit the width of an <div> no more than 50%, and no more than 200px.

Which means, when 50% is less than 200px, it should have the same behavior as max-width: 50%, otherwise its behavior becomes max-width: 200px.

How can I define this with CSS?
(without min function, which have not been supported yet)

<div class="some_element">Text here</div>
<style>
.some_element {
    background: red;
    float: left;
    width: auto;
    max-width: 200px;
    max-width: 50%; /* this will override previous one, but i want both of them work */
}
</style>

Answer 1

You cannot set max-width to both 200px and 50%. You could put the element in another element with max-width of 400px:

<div id="parent">
    <div id="child">Text here</div>
</div>


#parent {
    background-color: red;
    max-width: 400px;
}
#child {
    background-color: green;
    max-width: 50%;
}

Answer 2

You can state this desired rule as 50% max width when the page width is less than or equal to 400px, and 200px when the page width is greater than or equal to 400px. That sounds a lot like a media query! I handle smaller screen widths first and then override for larger widths, which is this CSS:

.some_element {
  background: red;
  float: left;
  width: auto;
  max-width: 50%;
}
@media (min-width: 400px) {
  .some_element {
    max-width: 200px;
  }
}

If you prefer, you can swap the 50% and the 200px and also change the min-width to max-width.

Answer 3

<div id="parent">
    <div id="sub">test content</div>
</div>

// css

#parent {
    max-width: 200px;
}
#sub {
    width: 50%;
}

Answer 4

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')
       }
    });