title: Specifying multiple max-width values for an element
body: <p>I have an element which should never be larger than let's say 90% of the container's width <em>and</em> never exceed an absolute width of 800px.</p>
  
  <p>Using CSS I can specify either</p>
  
  <pre><code>#element {
      max-width: 90%;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>#element {
      max-width: 800px;
  }
  </code></pre>
  
  <p>Unfortunately, I'm not aware of a syntax like</p>
  
  <pre><code>#element {
      max-width: 90% 800px;
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>#element {
      max-width: max(90%, 800px);
  }
  </code></pre>
  
  <p>which does the trick.</p>
  
  <p>Is there a way to solve this using CSS only? I would like to avoid JavaScript here.</p>
  
  <p>I already found <a href="https://stackoverflow.com/questions/30568424/min-max-width-height-with-multiple-values">this topic</a>, which unfortunately, does not work for me.</p>