如何让列表项（li）在不硬编码的情况下占满无序列表（ul）的完整高度（已使用display:flex）

当然有可行的实现方法！既然你已经把.menu设置成了display:flex，那完全可以借助flex布局的原生特性来实现，不需要硬编码任何高度值。下面是两种实用的方案：

方案一：利用Flex容器的align-items属性（推荐） #

这是最贴合flex布局设计思路的方法，核心是让flex子项自动拉伸填满容器高度：

.menu {
  display: flex;
  /* 虽然align-items: stretch是flex容器的默认值，但如果之前被覆盖过，需要显式声明 */
  align-items: stretch;
  /* 这里不需要设置固定高度，ul的高度可以由父元素、内容或者padding等任意方式决定 */
}

.menu-item {
  flex: 1; /* 既保证每个列表项平分宽度，也配合align-items让高度自动拉伸 */
  /* 可选：给列表项也设置成flex容器，方便内部p标签占满高度 */
  display: flex;
}

.menu-item p {
  margin: 0; /* 清除p标签默认的上下外边距，避免列表项内部出现空白间隙 */
  flex: 1; /* 让p标签占满列表项的高度 */
  /* 可选：如果需要文字垂直居中，可以添加这行 */
  align-self: center;
}

原理说明： #

• align-items: stretch会让所有flex子项（也就是你的.menu-item）自动拉伸，填满flex容器（.menu）的交叉轴高度（因为flex方向是默认的row，交叉轴就是垂直方向）。
• flex:1确保每个列表项平分容器宽度，同时让它们的高度跟随容器自动调整。
• 清除p标签的默认外边距是关键，否则即使列表项高度拉满，内部p标签的margin会导致视觉上有“没填满”的错觉。

方案二：使用height: 100%（适用于容器高度明确的场景） #

如果你的.menu高度是由父元素明确设置的（比如父元素有固定高度或百分比高度），也可以用这种方式：

.menu {
  display: flex;
  /* 假设父元素有确定的高度，或者.menu自身有min-height等 */
}

.menu-item {
  flex: 1;
  height: 100%; /* 让列表项高度继承容器的高度 */
  display: flex;
}

.menu-item p {
  margin: 0;
  flex: 1;
}

这种方法的局限性在于，如果.menu的高度是由自身内容撑开的，height:100%可能不会生效，所以更推荐第一种方案。

内容的提问来源于stack exchange，提问作者Vatsal A Mehta