在flexbox中将父div高度调整为子div高度

Question

我想在CSS中调整父div高度到子高度。

在我的代码中，两列的高度相同。

我希望第2列的高度较小，因为它包含较少的div来显示。

让我告诉你一个例子：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;