css布局问题，着急

<ul class="flex">

<li>a</li>
<li>b</li>
<li>c</li>

</ul>

针对高度：
1.ul高度固定
2.a的li高度固定
3.b的li高度会变化（a+b的高度不会超过ul）

要求： c占满剩余的高度，不用js可以写出来吗

---

ul {
    display: flex;
    height: 300px;
    width: 100px;
    flex-direction: column;
}
ul > li {
    flex-grow: 0;
}
li:nth-child(1) {
    height: 100px;
}
li:nth-child(2) {
    word-wrap: break-word;
}
li:nth-child(3) {
    flex-grow: 1;
}

你可以测试一下，应该有更好的方法。

而且这样子的兼容性应该很差。

---

少年，难道你没看过flexbox么？

---

给ul设overflow: hidden;,li{c}设个足够大的高度不就完了么，2333