title: height in vh (viewport) and max-height in px (pixels)
body: <p>Is it possible to define height of element where CSS3 tells:</p>
  
  <pre><code>if viewport &gt;= 1000px then
        element height: 300px (in pixels)
  else if viewport &lt; 1000px
        element height: 30vh (30% of viewport height)
  </code></pre>
  
  <p>So all I want is to have an element that has 30% of viewport but not more than 300px. Is it possible?</p>
  
  <p>This is what I've tested but didn't work:</p>
  
  <pre><code>div {
      height: 30vh;
      max-height: 300px;
  }
  </code></pre>