1

I would like to adapt the parent div height to children height in CSS only.

In my code, both columns have same height.

I would like column 2 to have a smaller height as it contains less divs to show.

Let me show you on an example:

#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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
nereide
  • 152
  • 8

1 Answers1

2

Add align-items:flex-start; to #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>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • 1
    Many thanks! It is exactly what I was looking for! stretch is the default value... That's why... http://www.w3schools.com/cssref/css3_pr_align-items.asp – nereide Apr 25 '16 at 13:09