Erweitern Sie Childs 'Höhen, um Eltern div zu füllen

Question

Ich habe ein Elternteil col mit seiner Höhe basierend auf dem Ansichtsfenster, und ich habe 3 Zeilen als Kinder.

Die Höhe der Eltern sollte für jedes Kind aufgeteilt werden, damit sie einen gleichen Teil des im Elternteil verfügbaren Speicherplatzes einnehmen.

Geben die height: 33% ist super lahm und ich kann nicht einen Weg, um es richtig zu machen.

<div class="col-md-12" style="height: 25vh;"> 
    <div class="row"> 
    <!--Content--> 
    </div> 
    <div class="row"> 
    <!--Content--> 
    </div> 
    <div class="row"> 
    <!--Content--> 
    </div> 
</div> 

Frage könnte ein Duplikat sein, aber ich weiß nicht, wie ich meine Anfrage richtig formulieren soll.

Answer 1

.box{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid red; 
 
} 
 

 
.row{ 
 
    background: gray; 
 
    margin: 1px 0px; 
 
    flex: 1; 
 
}

<div class="col-md-12 box" style="height: 25vh;"> 
 
    <div class="row"> 
 
    <!--Content--> 
 
    </div> 
 
    <div class="row"> 
 
    <!--Content--> 
 
    </div> 
 
    <div class="row"> 
 
    <!--Content--> 
 
    </div> 
 
</div>

Try display:flex