Stretch height with flexbox align-items center - html

Question

I have a div with display: flex; flex-direction: row;. The children of this div take the full height unless I specify align-items: center. Code below -
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
JSFiddle
What I want to achieve is that 2.1 and 2.2 should take 50px (50%) height and should have its content middle aligned vertically. They should also stretch the full available space horizontally (like width: auto or 100%). Then if 2.1 is not present, 2.2 should take 100px height and should be vertically aligned to middle.

Answer 1

You need to make row-items a flex box and apply align-items: center; to them
This is the code that you should add
.row1 .row-item {
display: flex;
align-items: center;
}
See result below :
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.row1 .row-item {
display: flex;
flex-wrap: wrap;
}
.row1 .row-item div {
width: 100%;
border: 1px solid blue;
display: flex;
align-items: center;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>

Answer 2

You can use line-height to achieve vertical alignment. In this case since your.row1 has a height of 100px add the following to that CSS: line-height: 100px; See the updated jsfiddle and for only .row1 see this jsfiddle