flex play

by Andy Bulka

HTML

<section class="fill-height-or-more">
  <div>
    <!-- stuff -->
    hi
  </div>
  <div>
    <!-- stuff -->
    there
  </div>
  <div>
    <!-- stuff -->
    you
  </div>
</section>

CSS

.fill-height-or-more {
  display: flex;
  flex-direction: column;
  background-color: aqua;
  height: 300px;
}
.fill-height-or-more > div {
  /* these are the flex items */
  flex: 1;
  background-color: teal;
  border-style: dashed;
  border-width: medium;
}