在Flexbox中组合不同的垂直对齐方式

Question

在一个flex容器中，我有另一个flex容器，其中有两个项目：content-title和content-body。我正在尝试将它们与不同的垂直对齐方式对齐。标题必须位于具有固定（响应）高度的容器的开头，另一个必须延伸到可用空间。

我不知道该怎么办（如果可以的话）。 第一项（标题）具有align-self: start，并且内容必须延伸（通过父级的属性：align-content: stretch）。

它不能按我的要求工作，因为内容正在使用空格，好像两个项目都在伸展一样。根据物体的内容，物体（content-body）必须具有相同的高度。

我不知道我是否清楚。这是工作代码： https://codepen.io/anon/pen/JaeXzb

总而言之，我想垂直拉伸2个项目，但将第一个项目保持固定的高度。

这是相关的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>

以及相关的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;
}

欢迎任何帮助。谢谢！

Answer 1

• 从flex-flow: row wrap;移除.orientItem
• 将flex-grow:1;添加到.content-body