Equal height flex container with center-aligned content

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’ and ‘middle aligned’ seem to exclude themselves, the one doesn’t work with the other.

Question: How can I create a row with two columns with different width, equal height and their content centered in the middle of each column?

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
    <div class="row">
        <div class="twelve wide purple column">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        </div>
        <div class="four wide red column  middle aligned">
            <div class="row">Forward</div>

        </div>
    </div>
</div>

http://jsfiddle.net/kjjd66zk/1/



The key to this layout is to apply equal heights to the primary flex container. Then make the flex items nested flex containers, which can center the content of the flex items.

Hence, the top level creates the equal height. The second level does the centering.

Here’s an example based on your code structure:

jsFiddle

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