Flex容器子元素设置height:100%后边框无法填满空间的问题

我做网站时碰到个问题：设置了display:flex的容器里，子元素明明加了height:100%，但侧边边框就是没法填满容器的高度。试了切换box-sizing和调整flex属性都没解决。

相关代码 #

CSS

nav {
  display: flex;
  height: 10vh;
  flex-shrink: 0;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(218, 165, 32, 1);
  box-sizing: content-box;
  border: 3px solid black;
}

nav>div {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  border: 2px solid black;
}

HTML

<header>
  <div id="titolo">hairdresser</div>
</header>
<nav>
  <div>home</div>
  <div>storia del negozio</div>
  <div>shop</div>
  <div>servizi</div>
  <div>iscriviti</div>
  <div>registrati</div>
</nav>
<main>
  <div class="lato-destro">
    gggg
  </div>
  <div class="lato-sinistro">
    hhhh
  </div>
  <div class="centro">
    kkkk
  </div>
</main>
<footer>
</footer>

问题原因 #

核心问题在容器的align-items: center上。flex容器的这个属性控制垂直方向（交叉轴）的子元素对齐，设为center时，子元素会被强制垂直居中，哪怕你给子元素写了height:100%，这个对齐规则也会直接覆盖高度设置，导致子元素实际高度达不到容器的100%，边框自然撑不满。

解决办法 #

直接改容器的align-items属性就行，同时子元素的内容居中需求完全不受影响：

把nav里的align-items: center换成align-items: stretch，修改后的CSS：

nav {
  display: flex;
  height: 10vh;
  flex-shrink: 0;
  justify-content: space-around;
  align-items: stretch; /* 替换成stretch */
  background-color: rgba(218, 165, 32, 1);
  box-sizing: content-box;
  border: 3px solid black;
}

这样设置后，子元素会自动填满容器的垂直高度，边框就能完全覆盖指定空间；而子元素自身的display:flex加上justify-content: center和align-items: center，依然能让内部文字保持居中，完美兼顾两种需求。

内容的提问来源于stack exchange，提问作者Davide Cervati