Align an element to the bottom within a flexbox, without using position:absolute

Question

See jsfiddle here: https://jsfiddle.net/q3ob7h1o/1/ Or just read it here if you'd rather:

Code

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.content {
  background: beige;
}
.footer {
  background: teal;
}

<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

What I am trying to do

What I am trying to do is have the .footer div align to the bottom of each of the .tile elements, so that regardless of the amount of content in each tile, the footers line up.

I know I can use position: absolute on the footer but I would rather avoid this as the height of the footer might not be known.

I tried turning .tile into a flexbox itself and setting its direction to column, but this didn't work. I also tried turning each tile into a table-cell but this didn't work either.

The bit that is throwing me is that I am trying to target an element within one of the children of an existing flexbox. Any flexbox properties I apply apply to .tile, not .footer

Help greatly appreciated :)

Answer 1

Try the following solution:

* {
  margin: 0;
  padding: 0;
}
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.tile {
  width: 33%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction:column;
}
.content {
  background: beige;
}
.footer {
  background: teal;

}

<ul>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some long long long long long long long long long long long long long long long long content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
  <li class="tile">
    <div class="content">
      <div class="photo"></div>
      <h3>This is some content</h3>
    </div>
    <div class="footer">
      <input type="submit" />
    </div>
  </li>
</ul>

The updated fiddle you can find here: https://jsfiddle.net/q3ob7h1o/2/