title: min/max width/height with multiple values
body: <h2>Edit in 2020 (min, max, clamp functions)</h2>
  <p>To anyone who get here by search engines:</p>
  <p>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min" rel="noreferrer">min</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max" rel="noreferrer">max</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clamp" rel="noreferrer">clamp</a> functions had got some supports in recent (2020) browsers. You may try <code>max-width: min(200px, 50%);</code>. You can have a look at these CSS functions while be careful about compatibility issues.</p>
  <hr />
  <p>Original post:</p>
  <p>I want limit the width of an <code>&lt;div&gt;</code> no more than <code>50%</code>, <b>and</b> no more than <code>200px</code>.</p>
  <p>Which means, when <code>50%</code> is less than <code>200px</code>, it should have the same behavior as <code>max-width: 50%</code>, otherwise its behavior becomes <code>max-width: 200px</code>.</p>
  <p>How can I define this with CSS?<br />
  (without <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min" rel="noreferrer"><code>min</code> function</a>, <del>which have not been supported yet</del>)</p>
  <pre><code>&lt;div class=&quot;some_element&quot;&gt;Text here&lt;/div&gt;
  &lt;style&gt;
  .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 */
  }
  &lt;/style&gt;
  </code></pre>