flex布局造成子元素的height值不确定，从而无法设置滚动问题

前言

flex布局目前的浏览器支持率已经很高了，在以前，作为一个前端开发工程师，对css是真的又爱又恨，各种float、absolute布局hack乱飞。现在有了flex，终于好点了，但是我在一个项目中打算全篇使用flex布局时发现了一个问题。

我的项目布局如下：

写了一个在线demo地址：https://codepen.io/jiladahe1997/pen/xxZvYXe

现在的问题在于：

一般而言我们要将一块区域设置为可以滚动的需要这样写：

.sidebar-content{
  height: xxxpx;
  overflow: auto;
}

但是由于全篇采用的都是flex布局，所有元素的高度都是自适应的，所以这里我们拿不到这个height的具体值，也就无法设置滚动了。

解决方法

先上修改好之后的demo:https://codepen.io/jiladahe1997/pen/QWyeQxa

思路描述

查找了大量资料之后，也没找到完全的解决办法，经过N次尝试终于发现了。要这样设置：

这是Header

  

    
这是sidebar title
    
这是sidebar content
  
  

    这是APP
    点我增加一个content
  


.container {
  flex-grow: 1;
  display: flex;
  overflow: auto;
}

.container .sidebar {
  width:200px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.container .sidebar .sidebar-content{
  overflow: auto;
}

关键在于三个地方：

• 每一个父级元素都必须设置为display: flex
• 每一个父级元素都必须设置为overflow: auto
• 自己本身也必须设置为overflow: auto

参考资料：

https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content