Set child of flex element to be height of parent? - css

Question

JSFiddle
I wish to have a to the left and b to the right. In the center is a list aligned horizontally. I want the full-height div to be the height of the parent.
So:
a 1 2 3 b
Here's the HTML:
<div class="container">
<div class="a">
a
</div>
<div class="full-height">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
b
</div>
</div>
I've looked at other SO posts which have 2 solutions:
Add flex-direction: column; to the parent. Which won't work in this situation as parent needs to be horizontally laid out.
Set parent height and make child height: 100%. I need the parents height to be dynamic.
Any ideas?

Answer 1

You need to use align-self:stretch; on the .full-height element.
To align elements inside the list I added:
align-items: center;
display: flex;
justify-content: center;
to the .full-height and a, also removed the padding from the ul.
UPDATE 1:
Updated to meet the comment. Moved flex content to ul instead of .full-height and added height 100% to ul.
You can read more about how flex works in this article.
.container{
display: flex;
position: static;
width: 100%;
background: gold;
align-items: center;
justify-content: space-between;
}
.a{
height: 300px;
align-items: center;
display: flex;
justify-content: center;
}
ul{
list-style-type: none;
}
li{
display: inline-block;
}
.full-height{
background: tomato;
align-self: stretch;
}
ul{
height:100%;
align-items: center;
display: flex;
justify-content: center;
padding:0;
margin:0;
}
<div class="container">
<div class="a">
a
</div>
<div class="full-height">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
b
</div>
</div>