Combine different vertical alignments within flexbox

Question

In a flex container, I have another flex container, in which I have two items: content-title and content-body. I'm trying to align them with different vertical alignments. The title has to be to the start of the container with a fixed (responsive) height, the other has to stretch to the available space.

I don't understand how can I do it (if it can be done). The first item (title) has align-self: start , and the content has to stretch (through the property in the parent: align-content: stretch ).

It's not working as I want because the content is using the space as if both items were stretching. The bodies (content-body) have to be the same height, according to their content.

I don't know if I'm clear. Here is the working code: https://codepen.io/anon/pen/JaeXzb

Summarizing, I want to stretch vertically 2 items, but keeping the first one with fixed height.

This is the relevant html:

<div class="bodycontent-preview"> 
    <div class="orientItem"><!-- Item 1 -->
        <div class="content-title">
            <h2>Title 1</h2>
        </div>
        <div class="content-body">
            <p>Content body here. Lorem ipsum.</p>
        </div>
    </div>
    <div class="orientItem"><!-- Item 2 -->
        <div class="content-title">
            <h2>Title 2</h2>
        </div>
        <div class="content-body">
            <p>Content body here. Lorem ipsum.</p>
        </div>
    </div>
</div>

And the relevant CSS:

.bodycontent-preview {
    display: flex;
    flex-wrap: wrap;
}
.orientItem {
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    flex-flow: row wrap;
    align-content: stretch;
}
.content-title {
    align-self: flex-start;
}

Any help is welcome. Thank you!

Answer 1

• Remove flex-flow: row wrap; from .orientItem
• Add flex-grow:1; to .content-body