无法使 flexbox 项目获得全高答案

【问题标题】：Unable to make flexbox item to get full height无法使 flexbox 项目获得全高
【发布时间】：2021-02-20 22:14:54
【问题描述】：

我还在学习 Flexbox，现在我遇到了一个 flexbox 项目的问题。

header-left 是一个包含两个项目的弹性容器，logo and nav menu。 Nav Menu 有 3 个链接。当我使用flexbox 时，navigation div 具有自己的高度，而不是整个header 容器的高度。因此，锚链接不采用其祖父母的高度，即 100% 的高度。

如何在使用 flexbox 的同时保持全高？这个问题正在影响我的悬停下拉菜单。

这是sn-p：

header{
    display: flex;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo{
    background-color: #2e3032;
    padding: 20px 28px;
}

.logo__image{
    display: block;
    width: 100px;
    height: auto;
}

.navigation{
    position: relative;
}

.navigation a{
    margin-left: 35px;
    text-decoration: none;
    color: #c7cacc;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.4px;
    transition: color 0.3s ease-in-out;
    position: relative;
}

<div class="header-left">
     <a href="#" class="logo">
            <img class="logo__image" src="https://png.pngtree.com/element_pic/00/16/07/115783931601b5c.jpg" >
     </a>

    <div class="navigation">
        <a href="#">Home</a>
        <a href="#" id="by-topic">Products</a>
        <a href="#" id="by-author">Contact Us</a>
    </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

把你的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;
}

如果您明确设置 header-left 的高度，则可以在其子项上使用 height:100% 来填充整个高度。之后你只需要使用 flex 重新定位导航链接。

【讨论】：