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' 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/

Answer 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.

(See the note at the bottom for more details.)

Here's an example based on your code structure:

body {
    height: 300px;             /* for demo purposes */
    color: white;
}

flex-container {
    display: flex;             /* primary flex container */
    flex-direction: row;       /* horizontal alignment of flex items
                                      (default value; can be omitted) */
    align-items: stretch;      /* will apply equal heights to flex items
                                      (default value; can be omitted) */
    height: 100%;
}

flex-item {
    display: flex;             /* nested flex container */
    flex-direction: column;    /* vertical alignment of flex items */
    justify-content: center;   /* center flex items vertically */
    align-items: center;       /* center flex items horizontally */
}

flex-item:first-child {
    flex: 3;                   /* consume 3x more free space than sibling */
    background-color: #a333c8;
}

flex-item:last-child {
    flex: 1;
    background-color: #db2828;
}

<flex-container>
    <flex-item><!-- also flex container -->
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </flex-item>
    <flex-item><!-- also flex container -->
        <div>Forward</div>
    </flex-item>
</flex-container>

jsFiddle demo

---

People sometimes consider a flex item and its content to be one element. This is not correct.

The HTML structure of a flex container has three levels:

• the container
• the item
• the content

Therefore, the content inside an item does not represent the item; it represents a separate element.

If the content inside an item is text, it becomes an anonymous element.

From the flexbox spec:

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

That's why, in the solution above, the flex item becomes a flex container. It enables the use of flex properties on the children of the flex item (the content).