親divの高さをフレックスボックスの子divの高さに合わせる

Question

親divの高さをCSSの子の高さに合わせたい。

私のコードでは、両方の列の高さが同じです。

表示するdivの数が少ないため、列2の高さを小さくしたいと考えています。

私は例をお見せしましょう：

#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

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>