How do you stop the elements of a div from overtaking their father?

Question

Hello, I’d like my side Ivs not to overtake the father. The amount of Ivs will depend on how much information you have in the bank (if you have 10 supermarkets, for example, 10 Ivs will appear)

div pai: divOptions

Four daughters: . eachOptions

HTML:

<div id="divOptions" class="col-sm-12 col-md-4 col-lg-4">

                                                    <div class="eachOptions" id="op1">
                                                        <input class="radioBTN" type="radio" name="radioButton"
                                                        id="radioBTN1">
                                                        <p id="eachOptionsT">Supermercado BigBom</p>
                                                        <p id="eachOptionsP">R$ 10,85<p>
                                                        </div>  

                                                        <div class="eachOptions" id="op2">
                                                            <input class="radioBTN" type="radio" name="radioButton"
                                                            id="radioBTN2">
                                                            <p id="eachOptionsT">Supermercado Fonseca</p>
                                                            <p id="eachOptionsP">R$ 11,43<p>
                                                            </div>  

                                                            <div class="eachOptions" id="op3">
                                                                <input class="radioBTN" type="radio" name="radioButton"
                                                                id="radioBTN3">
                                                                <p id="eachOptionsT">Supermercado Sempre Vale</p>
                                                                <p id="eachOptionsP">R$ 12,30<p>
                                                                </div>  


                                                                <div class="eachOptions" id="op4">
                                                                    <input class="radioBTN" type="radio" name="radioButton"
                                                                    id="radioBTN4">
                                                                    <p id="eachOptionsT">Supermercado Unifae</p>
                                                                    <p id="eachOptionsP">R$ 89,50<p>
                                                                    </div>  
                                                                </div>

CSS PAI :

#divOptions {
background-color: #F5F5F5;
padding-left: 0;
padding-right: 0;
height: 400px;

}

CSS FILHO :

#modalProduto #allMarkets #options .eachOptions {
padding-left: 5px;
position: relative;
border: 2px solid red;

}

Answer 1

I believe if you put one

overflow-y: auto

in divOptions, will solve your problem