Problem with overflow: scroll

Good morning,

I have a small problem with the action overflow: scroll . This action is applied in a div, which when loading the page is empty, and when filling out a form the results are shown. It is the box where the results of a search are displayed, in case it can help understanding.

The fact is that when you load the page you see that little blank box below the search bar:

When it would have to look like this.

I need to use overflow: scroll because the search box does not want to show more than 3 results on the screen, and thanks to the scroll, you can see the rest of the results that match the search.

The HTML code:

<form class="busqueda" action="busqueda.php" method="get">
        <input type="text" id="busqueda" name="busqueda" placeholder="Buscar un juego..." autocomplete="off" onKeyUp="buscar();">
        <button type="submit" name="button" class="fa fa-search"></button>
</form>
<div id="resultadoBusqueda"></div>

CSS Code:

#resultadoBusqueda {
z-index: 1000;
background: white;
position: absolute;
top: 50px;
width: 300px;
max-height: 228px;
overflow: scroll;
box-shadow: .1px .1px 2px #888888;

}

Is there any way to complicate life to make that box disappear when the div resultadoBusqueda is empty that is going to be as long as the page is loaded without having to remove the overflow: scroll?