title: CSS JS(maybe) Div scroll bars show and hide
body: <p>I have an autocomplete search that I want to be 40% of the screen then scroll the rest.</p>
  
  <p>I have that part working fine, my problem is the scroll bar always shows, regardless if there is overflow. I want the vertical scroll to be hidden if there are only, say, 2 results returned.  Then if there are 50 it shows.</p>
  
  <p>Here is what I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="AccountSearchResultsContainer"&gt;
  &lt;div id="AccountSearchResults"&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#AccountSearchResults {
  border: 2px solid #666;
  margin: 0px auto;
  width: 100%;
  display: none;
  }
  
  #AccountSearchResultsContainer {
  border-bottom: 2px solid #666;
  margin: 0px auto;
  width: 54%;
  height: 40%;
  overflow: scroll;
  overflow-x: hidden;
  display: none;
  padding-right: 4px;
  }
  </code></pre>
  
  <p>Will I have to write a script to determine the screen height AccountSearchResultContainer, and the height of AccountSearchResult...if ASR > ASRC then show scroll bar or is there a way to achieve this with CSS?</p>