Flexbox Chrome

by r3c

HTML

<div class="container">
  <div class="content">
    I'll grow automatically<br />
    so I'll use remaining space.
  </div>
  <div class="bottom">
    Link at the bottom
  </div>
</div>

<div class="container">
  <div class="content">
    I won't grow as I already need<br />
    more than my container's height<br />
    to be displayed.<br />
    <br />
    Blah<br />
    Blah<br />
    Blah<br />
  </div>
  <div class="bottom">
    Link at the bottom
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}

.content {
  display: flex; /* Remove me to fix Chrome rendering */
  flex: 1;
}

.container {
  border: 1px solid black;
  height: 100px;
  overflow-y: scroll;
  margin: 8px 0;
}

.content {
  background: #8D8;
}