在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