Adapter la hauteur du div parent à la hauteur div divisée en flexbox

Question

Je voudrais adapter la hauteur div des parents à la taille des enfants en CSS seulement.

Dans mon code, les deux colonnes ont la même hauteur.

Je voudrais que la colonne 2 ait une hauteur plus petite car elle contient moins de divs à afficher.

Permettez-moi de vous montrer sur un exemple:

#mainPane { 
 
    display: flex; 
 
    background-color: blue; 
 
} 
 
.column { 
 
    width: 250px; 
 
    background-color: gray; 
 
    margin: 5px 15px 5px 15px; 
 
    display: inline-block; 
 
} 
 
.news { 
 
    background-color: white; 
 
}

<section id="mainPane"> 
 

 
    <div class="column"> 
 
    <div class="colHeader">Col1</div> 
 
    <div class="news">Line1</div> 
 
    <div class="news">Line2</div> 
 
    <div class="colFooter">Footer</div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="colHeader">Col2</div> 
 
    <div class="colFooter">Footer</div> 
 
    </div> 
 

 
</section>

Answer 1

Ajouter align-items:flex-start;-#mainPane:

#mainPane{ 
 
    display: flex; 
 
    align-items: flex-start; 
 
    background-color: blue;  
 
} 
 
.column { 
 
    width: 250px; 
 
    background-color: gray; 
 
    margin: 5px 15px 5px 15px; 
 
} 
 
.news{ 
 
    background-color: white; 
 
}

<section id="mainPane"> 
 
    <div class="column"> 
 
    <div class="colHeader"> 
 
     Col1 
 
    </div> 
 
    <div class="news"> 
 
     Line1 
 
    </div> 
 
    <div class="news"> 
 
     Line2 
 
    </div>  
 
    <div class="colFooter"> 
 
     Footer 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="colHeader"> 
 
     Col2 
 
    </div> 
 
    <div class="colFooter"> 
 
     Footer 
 
    </div> 
 
    </div> 
 
</section>