使用Flex布局时设置overflow:auto后子项交叉轴不拉伸的解决方法

这个坑我之前踩过！你遇到的问题核心原因是：当给#middle这个flex容器加上overflow-y: auto后，flex布局的默认规则导致内部的nav和main没有跟着滚动内容的高度拉伸——它们只会停留在可视区域的高度，所以背景色就没法覆盖超出的部分。

解决方案 #

只需要做两个小修改就能搞定：

1. 给#middle添加min-height: 0，打破flex容器默认的min-height: auto限制
2. 给nav和main添加min-height: 100%，确保它们的高度能铺满容器的可滚动区域

修改后的完整代码 #

HTML（无需改动）

<body> 
  <div id="middle"> 
    <nav> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </nav> 
    <main> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Content shortened; more content to make the scrollbar appear 
    </main> 
  </div> 
  <!-- Main Bereich Ende --> 
  <!--Footer Anfang --> 
  <footer> 
    <div id="footerleft"> 
      <h2>Letzte Änderung <br>20.05.2018</h2> 
    </div> 
    <div id="footermiddle"> 
      <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3> 
    </div> 
    <div id="footerright"> 
      <a href="#jump-body"> 
        <img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang"></img> 
      </a> 
    </div> 
  </footer> 
  <!--Footer Ende --> 
</body>

CSS（修改部分已标注）

body { 
  margin: 0; 
  padding: 0; 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
} 

#middle { 
  flex: 1 1 auto; 
  display: flex; 
  flex-direction: row; 
  align-items: stretch; 
  overflow-y: auto; 
  min-height: 0; /* 关键新增：打破flex容器默认最小高度限制 */
} 

nav { 
  flex: 1; 
  background-color: blue; 
  min-height: 100%; /* 关键新增：确保背景铺满容器高度 */
} 

main { 
  flex: 4; 
  background-color: maroon; 
  min-height: 100%; /* 关键新增：确保背景铺满容器高度 */
} 

footer { 
  width: 100%; 
  flex: 0 0 auto; 
  display: flex; 
} 

#footerleft { flex: 2; } 
#footermiddle { flex: 6; } 
#footerright { flex: 2; } 

#footerright img { 
  width: 30px; 
  height: 30px; 
  display: block; 
  margin: 0px auto auto; 
}

原理说明 #

• Flex容器默认有min-height: auto的特性，这会让容器高度至少等于内部内容的高度，但当添加overflow-y: auto后，这个特性会阻碍内部flex项目继承容器的可滚动高度，导致它们的高度被限制在可视区域内。
• 设置min-height: 0后，容器可以收缩到小于内容高度，配合nav和main的min-height: 100%，就能让它们的高度跟随容器的滚动内容高度延伸，背景色自然就铺满整个区域了。

现在你可以测试一下，不管main里的内容有多长，nav和main的背景色都会一直延伸到内容底部，滚动时也不会出现断裂的情况啦~

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