В 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;
}
Любая помощь приветствуется.Спасибо!