title: Setting a max-height of page-height for a dropdown
body: <p>Say you have a dropdown with a lot of options that overflow the page height. I know I can use <code>overflow: auto</code> to make it scroll, but only if I set it a <code>max-height</code>. How do I set a max-height that ensures the element won't overflow the browser window? </p>
  
  <p><a href="https://i.stack.imgur.com/RBvoL.png" rel="noreferrer">Like in this image</a></p>
  
  <p>The left is what it's like now. Dropdown overflows page. The right is what it should be like -- the dropdown is resized to be height of just under the page height. </p>
  
  <p>I've tried setting <code>max-height</code> to different values like <code>45vh</code> since the dropdown is about halfway down the page, but this needs to fit all types of screen sizes so isn't flexible enough.</p>
  
  <p>CSS solutions preferred in this case.</p>