css - Flex box child 的高度是 parent 的 100%

Question

以下是我的菜单结构:

<ul>
<li> menu 1</li>
<li> menu 2<br/> description</li>
<li> menu 3</li>
<li> menu 4</li>

</ul>

正如您注意到的，第二个菜单的高度与其他菜单的高度不同，这是因为它的内容

所以看看css

ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap;
}
ul>li{
background-color:blue;
border:2px solid red;
}

这会将 ul 显示为一个菜单，其中的元素并排显示在包含父级“ul”的中心，但不幸的是高度不同
那么我如何让 child 使用 flexbox 拥有 100% 的 parent 而不添加自定义像素高度？

Answer 1

在 ul>li 上放置一个 align-self: stretch。

查看示例:http://cssdeck.com/labs/full/nttaiab7/