如何使用CSS与Flexbox实现子HTML元素垂直水平铺满父容器

• 包裹#child3的父元素li设置了display: flex + align-items: center，默认会让子元素高度收缩到内容高度，无法自动占满父容器高度
• #child3本身是行内元素，默认宽高仅适配自身内容，不会主动填充父容器空间
• 父元素li默认设置了左右padding，如果需要连内边距区域也覆盖，需要额外处理该属性

首先替换你代码里的#child3样式：

#child3 {
  /* 行内元素转块级，支持宽高设置 */
  display: block;
  /* 宽高100%填充父容器可用空间 */
  width: 100%;
  height: 100%;
  /* 保持内部close图标居中显示，不需要可以删除 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 清除默认行高带来的尺寸偏移 */
  line-height: 1;
}

如果需要#child3完全铺满整个li（包含li原本的左右内边距区域），额外修改最后一个li的样式即可：

#container nav ul li:last-child {
  margin-left: auto;
  /* 调整对齐规则，允许子元素高度拉伸占满 */
  align-items: stretch;
}

内容的提问来源于stack exchange，提问作者nothing special