CSS JS(maybe) Div scroll bars show and hide

Question

I have an autocomplete search that I want to be 40% of the screen then scroll the rest.

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.

Here is what I have:

HTML:

<div id="AccountSearchResultsContainer">
<div id="AccountSearchResults">

</div>
</div>

CSS:

#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;
}

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?

Answer 1

I think this can be done when you change

overflow: scroll;
overflow-x: hidden;

to

overflow: auto;
overflow-x: hidden;

or simply

overflow-y: auto;