Html 无法使flexbox项目达到全高

我还在学习Flexbox，现在我面临一个Flexbox项目的问题

标题左侧

是一个flex容器，包含两项，

徽标和导航菜单

<代码>导航菜单有3个链接。当我使用

flexbox

时，

navigation

div采用自己的高度，而不是整个

标题

容器的高度。正因为如此，锚链的高度没有它祖父母的高，也就是100%的高度

我如何使用flexbox并保持全高？此问题正在影响我的悬停下拉菜单

以下是片段：

标题{
显示器：flex；
证明内容：之间的空间；
}
.左标题{
显示器：flex；
对齐项目：居中；
}
.标志{
背景色：#2e3032；
填充：20px28px；
}
.logo___图像{
显示：块；
宽度：100px；
高度：自动；
}
.导航{
位置：相对位置；
}
.导航a{
左边距：35px；
文字装饰：无；
颜色：#c7cacc；
字号：900；
文本转换：大写；
字体大小：12px；
字母间距：1.4px；
过渡：颜色0.3s，易于输入输出；
位置：相对位置；
}

---

将css更改为：

.header-left {
  display: flex;
  align-items: center;
  height:140px; <---Logo height plus padding
 }


.navigation{
  position: relative;
  height:100%;
  display:flex;
  align-items:center;
  background:cadetblue;
}

。左标题{
显示器：flex；
对齐项目：居中；
高度：140像素；