vertical autofill

by Felis Catus

HTML

<div class="autolinesize">
  <span>line1</span>
  <span>line2</span>
  <span>line3</span>
</div>
<div class="autolinesize">
  <span>line1</span>
  <span>line2</span>
</div>
<div class="autolinesize">
  <span>line1</span>
</div>

SCSS

.autolinesize {
  display: flex;
  flex-direction: column;
  border: 1px solid silver;
  margin: 5px;
  height: 60px;
  font-size: 14px;
  font-family: sans-serif;
  justify-content: space-between;
  &:before, &:after {
    content: '';
    flex-basis: 0.7em;
    flex-grow: 1;
    flex-shrink: 1;
  }
  &>span {
    flex-basis: 2em;
    flex-grow: 2;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}