flex grow

by cm0s

HTML

<div class="content">
  <div class="card">
    <div class="card-title card-row">
      Card 1
    </div>
    <div class="card-content card-row">
      Content here take more height
    </div>
    <div class="card-footer card-row">
      My footer
    </div>
  </div>
   <div class="card">
    <div class="card-title card-row">
      Card 2
    </div>
    <div class="card-content card-row">
      Content here
    </div>
    <div class="card-footer card-row">
      My footer
    </div>
  </div>
   <div class="card">
    <div class="card-title card-row">
      Card 3
    </div>
    <div class="card-content card-row">
      Content here
    </div>
    <div class="card-footer card-row">
      My footer
    </div>
  </div>
</div>

CSS

.card{
  border:1px solid #777;
  margin: 5px;
  width: 100px;
}

.content{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  width:225px;
}

.card-row{
  padding-bottom: 4px;
  border-bottom: 1px solid #888;
}