如何在<li>控制高度的同时将元素扩展到容器的整个宽度<ul>？

Question

我在SO和其他网站上看到的大多数解决方案都要求将显示设置为表格：

ul {
  overflow: auto;
  padding: 0px;
  width: 100%;
  display: table;
  table-layout: fixed;
}
ul li {
  display: table-row;
}

但是，当我尝试在<ul>容器上设置最大高度时，会忽略height。如何让<li>元素扩展<ul>的全长，同时还能在<ul>上设置高度？

Answer 1

Flexbox可以做到这一点：（如果我理解你想要的）。

* {
  margin: 0;
}
ul {
  height: 150px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
ul li {
  background-color: plum;
  border-bottom: 1px solid red;
  width: 100%;
  flex: 1;
  text-decoration: none;
  list-style: none;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Answer 2

您尝试过吗：

nav {
  background-color:blue;
}
ul {
  height:50em;   //change to whatever
  margin:0;
  padding:0;
}
ul li {
  background-color:green;
  width:100%;
  height:33.333333%;  // divide by total li's, in this case, i have 3 li's
  text-decoration:none;
  list-style:none;
}

https://jsfiddle.net/8s2o7ra0/3/