在使用flex盒子模型一段时间之后，发现这货的坑真是不少，其中最最让人难理解的，就是它的flex-grow部分的子元素无法使用100%的对应尺寸。下面来举个例子：

<div style="display: flex; width: 300px; height: 200px;">
  <div style="width: 100px;"></div>
  <div style="flex-grow: 1">
  <div style="width: 100%; height: 100%; overflow: auto;"></div>
  </div>
</div>

上面的代码，我们希望创建一个盒子，盒子左边有一个固定100px宽度的div，右边说一个填满剩余空间的弹性伸缩div。而在这个弹性伸缩的div内部，我们希望放一个塞满整个区域的容器，容器设置了overflow: auto，因此，当这个容器内的内容超出可视区域时，会出现滚动条。

然而，事情没有想像的那么容易，上面的width: 100%并不会按我们想象的方式，使用它的父元素的宽度，而是会使用300px。

这是因为，再css标准里面，width／height如果是百分比的话，必须为它的parent提供一个确定的width／height，当然，parent的width／height也可以从再上一层继承。而如果上面这个条件不成立的话，parent会继续向上冒泡，直到找到一个确定的对应宽高为止。

不幸的是，flex的flex-grow是不确定的，因此，这里的width: 100%不能按我们想象的方式展现。

如何解决这个问题呢？那就是再在flex-grow元素的内部使用flex布局，它自己是弹性伸缩的，而你可以使它的内部元素也是弹性伸缩的：

<div style="display: flex; width: 300px; height: 200px;">
  <div style="width: 100px;"></div>
  <div style="flex-grow: 1; display: flex;">
  <div style="flex-grow: 1; height: 100%; overflow: auto;"></div>
  </div>
</div>

这样修改之后，就可以达到我们的目的。

通过这个问题的分析，基本就掌握了flex里面的精髓。“弹性”代表着没有固定宽度，而想要占满弹性容器，就必须在该容器本身实现一个新的弹性盒子模型。