我的项目布局如下：

写了一个在线demo地址： https://codepen.io/jiladahe1997/pen/xxZvYXe
（点击demo中的“增加一个元素”按钮，可以增加side container中的元素）
现在的问题在于：

一般而言我们要将一块区域设置为可以滚动的需要这样写：
.sidebar-content{
  height: xxxpx;
  overflow: auto;
但是由于全篇采用的都是flex布局，所有元素的高度都是自适应的，所以这里我们拿不到这个height的具体值，也就无法设置滚动了。 
先上修改好之后的demo:https://codepen.io/jiladahe1997/pen/QWyeQxa
 （点击“增加一个元素”按钮，可以增加side container中的元素） 
查找了大量资料之后，也没找到完全的解决办法，经过N次尝试终于发现了。要这样设置： 
<div class="header">这是Header</div>
<div class="container">
  <div class="sidebar">
    <div class="sidebar-title">这是sidebar title</div>
    <div class="sidebar-content">这是sidebar content</div>
  <div class="app">
    这是APP
    <button onclick="clickHandle()">点我增加一个content</button>
.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
                    前言flex布局目前的浏览器支持率已经很高了，在以前，作为一个前端开发工程师，对css是真的又爱又恨，各种float、absolute布局hack乱飞。现在有了flex，终于好点了，但是我在一个项目中打算全篇使用flex布局时发现了一个问题。我的项目布局如下：写了一个在线demo地址：https://codepen.io/jiladahe1997/pen/xxZvYXe现在的问题在于：一般而言我们要将一块区域设置为可以滚动的需要这样写：.sidebar-content{  height: x
				Flex：Flexible Box的缩写，意为”弹性布局”开启Flex布局的标志：在父容器上定义 display:flex;
决定主轴方向：flex-direction
是否换行: flex-wrap
决定主轴方向的排列方式： justify-content
垂直轴/交叉轴的排列方向: align-items
决定多条主轴的对齐方式：align-content
flex-wrap: wrap; 中间出现留白部分，如何解决?
......
				CSS中传统的布局方式是，基于盒子模型，依赖display属性+position属性+float属性。但对于特殊的布局非常不方便，比如，垂直居中。因此引入弹性盒子flex的布局。
一.flex布局中6个设置在容器上的属性：
1，flex-direction属性决定项目排列方向。（值：row(默认),row-reverse,column,column-reverse）
2,flex-...
				Flex布局中，子元素不能height填充满
在父元素（flex-container）设置height：100%; 而子元素设置height：100%的时候失效
于是，如上图去除子元素的100%属性。
<div class="main-container">
    <div class="left">
    <div class="right">
        <div class="child sc
				flex与grid响应式布局中的子容器滚动条问题
最近在用grid布局写一些简单的响应式页面页面，遇到一个问题，就是我们的全局用grid布局或者flex布局中，遇到某个子元素的宽度或者高度是页面剩下的空间（flex是flex-grow:1的空间，grid是1fr的空间），但是这个元素空间又需要有滚动条的出现，即该元素中有很多子元素需要以滚动条的形式查看内容。
grid中即使设置了overflow:...
				事情描述：希望有一个页面布局，头部高度不动，内容区域可以随着外围区域变化自动填充剩余的空间，在内容区域内有一个滚动的div可以自适应内容区域的高度。
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title&g...
同时，你也可以使用`flex-shrink`属性来控制子元素在空间不足时的缩放比例，这可以确保子元素不会因为宽度过大而导致布局混乱。例如，你可以设置一个子元素的`flex-shrink`为0，来确保它的宽度保持不变：
.child {
  width: 100px;
  flex-shrink: 0;
这样就可以让子元素的宽度始终为100px，而不会随着容器大小的变化而改变。