在使用flex盒子模型一段时间之后，发现未经授权，禁止复制转载。【本文首发于唐霜的博客】这货的坑真是不少，其中最最让人难理解的，【转载请注明来源】原创内容，盗版必究。就是它的flex-grow部分的子元素无【关注微信公众号：wwwtangshuangnet】【作者：唐霜】法使用100%的对应尺寸。下面来举个例子【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】：

<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>

上面的代码，我们希望创建一个盒子，盒子左【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。边有一个固定100px宽度的div，右边【本文受版权保护】本文版权归作者所有，未经授权不得转载。说一个填满剩余空间的弹性伸缩div。而在本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】这个弹性伸缩的div内部，我们希望放一个原创内容，盗版必究。【本文首发于唐霜的博客】塞满整个区域的容器，容器设置了overf【作者：唐霜】【转载请注明来源】low: auto，因此，当这个容器内的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net内容超出可视区域时，会出现滚动条。

然而，事情没有想像的那么容易，上面的wi原创内容，盗版必究。本文作者：唐霜，转载请注明出处。dth: 100%并不会按我们想象的方式【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】，使用它的父元素的宽度，而是会使用300【转载请注明来源】【本文受版权保护】px。

这是因为，再css标准里面，width／【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netheight如果是百分比的话，必须为它的转载请注明出处：www.tangshuang.net【本文受版权保护】parent提供一个确定的width／h【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】eight，当然，parent的widt本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.neth／height也可以从再上一层继承。而【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】如果上面这个条件不成立的话，parent【未经授权禁止转载】转载请注明出处：www.tangshuang.net会继续向上冒泡，直到找到一个确定的对应宽本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】高为止。

不幸的是，flex的flex-grow是【作者：唐霜】著作权归作者所有，禁止商业用途转载。不确定的，因此，这里的width: 10转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。0%不能按我们想象的方式展现。

如何解决这个问题呢？那就是再在flex-【转载请注明来源】著作权归作者所有，禁止商业用途转载。grow元素的内部使用flex布局，它自本文作者：唐霜，转载请注明出处。【本文受版权保护】己是弹性伸缩的，而你可以使它的内部元素也本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】是弹性伸缩的：

<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著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。里面的精髓。“弹性”代表着没有固定宽度，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。而想要占满弹性容器，就必须在该容器本身实【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net现一个新的弹性盒子模型。