Flexbox：在此布局中使子填充其父级的100％高度，而不使用固定高度或位置绝对值

Question

Codepen link

所以我有这个非常典型的布局 .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>

我见过this question，但这些解决方案在父级上提供position: relative，在子级上提供position: absolute或固定高度解决方案。

修改目标是让a border-bottom显示在容器的底部。

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 Demo