在柔性盒中調整父div的高度以適應孩子div高度

Question

我想將父div的高度調整爲僅用於CSS中的兒童高度。

在我的代碼中，兩列的高度相同。

我想第2列有一個較小的高度，因爲它包含較少的divs顯示。

讓我告訴你一個例子：

#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>