Equal height columns with centered content in flexbox

Question

I\'d like to have two columns of equal height and their content should be middle aligned, so in the very center of each div.

Problem: \'equal height

Answer 1

You need to give height to your elements

.height {
  height: 300px;
}
.row {
  height: 100%;
}
.row > div {
  height: 100%;
}

Updated fiddle 1

If you want them to center vertical, update above .row > div rule to this

.row > div {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

Updated fiddle 2