Flexbox：在此布局中，使子项填充其父项的100％高度，而没有固定的高度或绝对位置

Question

Codepen链接

因此，我有一个非常典型的布局.logo可以是任何高度，我需要nav & ul & li & a .container内部必须占据其宽度的100％。

SCSS

.logo {
    font-size: 40px;
}

header {
    background-color: tomato;
}

.container {
    display: flex;
    padding: 10px;
    align-items: center;
}

nav {
    margin-left: auto;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;

    li {
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }

}

标记

<header>
    <div class="container">
        <div class="logo">I'm logo</div>
        <nav role='navigation'>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>  
    </div>
</header>

我已经看到了这个问题，但是解决方案提供了以下一种position: relative对于父级和position: absolute对子级或固定高度的解决方案。

编辑的目标是有a会就在容器的底部显示边框底部。

Answer 1

我认为这是您追求的目标：

 * { margin: 0; padding: 0; } .logo { font-size: 40px; } .container { display: flex; } .logo { flex: 0 0 auto; background: lightblue; } nav { flex: 1 1 auto; display: flex; flex-direction: column; } ul { margin: 0; padding: 0; list-style-type: none; display: flex; flex: 1 } li { flex: 1; text-align: center; display: flex; flex-direction: column; } a { width: 100%; flex: 1 100%; padding: 12px; border-bottom: 1px solid red; } 

 <header> <div class="container"> <div class="logo">Lorem ipsum dolor sit amet.</div> <nav role='navigation'> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Clients</a> </li> <li><a href="#">Contact Us</a> </li> </ul> </nav> </div> </header> 

Codepen演示