Div on top of each other

SOLVED! According to devgaspa's comment.
I found it simpler and how it solved, nor tried other methods. THANK YOU

  

Using the flex-box property of css3 I was able to do what you   needs, but the width of the parent div does not accompany the children, it is fixed,   maybe to sort this out. JSFiddle:   jsfiddle.net/devgaspa/zgveahjp/2 Reference:   developmentalweb.com/css/flexbox Can i use ?:   caniuse.com/#feat=flexbox - devgaspa

.pai {
    background: orange;
    
    display: flex;
    
    flex-direction: column;
    flex-wrap: wrap;
    
    height: 500px;
    width: 0px;
}

.filhos {
    border: 1px solid lightgray;
    box-sizing: border-box;
   height: 100px;
    width: 100px;
}

<div class="pai">     
    <div class="filhos">0</div>
    <div class="filhos">1</div>
    <div class="filhos">2</div>
    <div class="filhos">3</div>
    <div class="filhos">4</div>
    <div class="filhos">5</div>
    <div class="filhos">6</div>
    <div class="filhos">7</div>
    <div class="filhos">8</div>
    <div class="filhos">9</div>
    <div class="filhos">10</div>
</div>

You can do this as follows with jQuery:

$(document).ready(function() {
    var divPai = $("#idPai");

    if (divPai.height() <= 200) {
        divPai.addClass("umaColuna").removeClass("duasColunas");
    } else {
        divPai.addClass("duasColunas").removeClass("umaColuna");
    }
});

Basically what this will do is:

If div id="divPai" is less than or equal to 400px height (or whatever value you want to be the maximum value set for the height of the parent div), it will add a class named umaColuna to #divPai :

<div id="divPai" class="umaColuna">

and if the value is greater, add a class duasColunas :

<div id="divPai" class="duasColunas">

Then to make the modification and transaction to split the content within #divPai so that it has a or two columns depending on this class change above, create the referencing CSS code for the classes as follows:

/* Personaliza o espaçamento entre as colunas */
#idPai {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}

/* Divide o conteúdo dentro da #divPai em uma coluna */
.umaColuna {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

/* Divide o conteúdo dentro da #divPai em duas colunas */
.duasColunas {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.classFilho {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #DDD;
    margin: 0 2px 15px 2px;
/* O código abaixo evita problemas de posicionamento das divs filhos */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

And the HTML code will look something like:

<div id="idPai">
    <div class="classFilho">0</div>
    <div class="classFilho">1</div>
    <div class="classFilho">2</div>
    <div class="classFilho">3</div>
</div>

Here's an example online at jsFiddle: link
Click the Add new child div button in the example link to add new child% co.

For it not to exceed 300px put the tag

 max-height: 300px;