html - 如何在控制高度的同时将 元素扩展到 容器的整个宽度？

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>