Dar height and overflow-y in a div

Question

I’m trying to give height and overflow-y in a div to limit the size of the div and add a scroll.

Something like this:

I’m uploading a list of data from the BD (I’m working on ASP MVC) to the div, and adding to height and the overflow-y in the same:

<div id="divListaEstabs" style="height: 60%; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>

Problem?

The scroll is added in the div, but it is not limited in height, increasing the page size (as shown in the image):

Answer 1

You have the height(height) in %. Experiment in px:

<div id="divListaEstabs" style="height: 60px; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>

Answer 2

Try to change from heigth to max-heigth, so you’ll have more flexibility and responsiveness in modal:

<div id="divListaEstabs" style="max-height: 10em; overflow-y: scroll;">
    <input type="checkbox" id="selectall">Seleccionar todos
    <br />
    @foreach (var item in ViewBag.estabelecimentos)
    {
        <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
    }
</div>