flex盒子模型的grow部分子元素宽高不能用百分比

广告位招租
扫码页面底部二维码联系

在使用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里面的精髓。“弹性”代表着没有固定宽度,而想要占满弹性容器,就必须在该容器本身实现一个新的弹性盒子模型。