Why is the text not centered vertically anymore as soon as I set a height to the flex container? How can I fix this?
ul {
display: flex;
list-style: none;
background: green;
width: 400px;
align-items: center;
}
ul li {
flex: 50%;
}
ul.fail {
background: red;
}
ul.fail li {
height: 100px;
}<ul>
<li>I am some text</li>
<li>I am some more text I am some more text I am some more text</li>
</ul>
<ul class="fail">
<li>I am some text</li>
<li>I am some more text I am some more text I am some more text</li>
</ul>