fixed footer variable height content

by Ben Gillbanks

HTML

<div class="wrapper">
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in here. Some more text. Some more text.
        Some text goes in here. Some more text. Some more text.
      </p>  
    </div>
    <footer>
      <a href="#button">button</a>
    </footer>
  </div>
  <div class="box">
    <div class="content">
      <p>
        Some text goes in...

SCSS

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.box {
  float: left;
  width: 30%;
  background: white;
  margin: ((100% / 3) - 30) / 2;
  display: flex;
  flex-direction: column;
}

.box .content {
  padding: 1em;
  flex-grow:2;
}

.box footer {
  padding: 1em;
  text-align: center;
}