100%高度flex-direction:column布局overflow滚动失效问题

我太懂这个坑了！当你用flex-direction:column结合justify-content:flex-end让列表项默认靠底部对齐时，一旦内容超出容器高度，overflow-y:scroll就完全不起作用——这其实是flex布局的特性导致的，我来给你拆解原因和靠谱的解决办法。

问题根源 #

当你给.items容器设置了justify-content:flex-end时，flex容器会优先满足这个对齐需求，哪怕内部内容的高度已经超过了容器本身的高度，它也不会触发滚动，反而会“撑开”容器，直接忽略你设置的overflow-y:scroll属性。简单说就是：flex的对齐规则优先级高于overflow的滚动规则。

解决方案：嵌套内层容器 #

最稳妥的办法是给.items内部再加一层容器，把控制对齐的flex属性移到内层容器上，外层只负责控制滚动和占满剩余空间。这样既能保留底部对齐的效果，又能让滚动条正常生效。

修改后的完整代码

HTML部分：

<div class="column"> 
  <div class="items"> 
    <div class="items-inner">
      <div class="item">Harry Potter</div>
      <!-- 可以继续添加更多item测试滚动效果 -->
    </div> 
  </div> 
  <div class="form"><button>ADD items</button></div> 
</div>

CSS部分：

body,html{ 
  height: 100%; 
  margin: 0; 
  padding: 0 
}
.column{ 
  height: 100%; 
  background-color: #766; 
  display: flex; 
  flex-direction: column; 
}
.items{ 
  background-color: #432; 
  padding: 8px; 
  flex-grow: 1; 
  width: 200px; 
  overflow-y: scroll; 
  /* 移除原来的flex相关属性，交给内层容器处理 */
}
.items-inner {
  height: 100%; /* 强制内层容器高度和外层一致 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 在这里实现底部对齐 */
}
.item { 
  margin: 4px; 
  background-color: orange; 
}
.form{ 
  background-color: #834; 
  margin: 8px; 
}

原理说明 #

• 外层.items只负责占满父容器的剩余空间（flex-grow:1），并设置overflow-y:scroll来触发滚动。
• 内层.items-inner设置height:100%，确保它的高度不会超出外层容器，同时用justify-content:flex-end实现列表项的底部对齐。当内部item数量增多、总高度超过.items-inner的高度时，外层.items的滚动条就会正常生效啦。

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