title: Max-height on empty div
body: <p>I have DIV element which only has a few lines in and a background image.
  The image size is 335px height. </p>
  
  <p>I want the the div's max-height to be 335px but allow it to shrink if the browser window is smaller(mobile).</p>
  
  <p>But the div just stays the size of the paragraph in the div. 
  This is my CSS code for the DIV. Any ideas on how i can set the default starting height to 335px but allow it to shrink? The max width works perfectly.</p>
  
  <pre><code>#header
  {
      background-image: url('Images/Header.png'); 
      margin: 0 auto;
      max-width:1024px; 
      max-height: 335px;
      background-size: 100% 100%;
      height: 100%;
      overflow: auto;
      --max-line-height: 335px;
  }
  </code></pre>
  
  <p>Many Thanks D</p>