See the Pen <a href='https://codepen.io/vanessa219/pen/MMdxqX/'>Last item with remaining available height</a> by Vanesssa (<a href='https://codepen.io/vanessa219'>@vanessa219</a>) on <a href='https://codepen.io'>CodePen</a>.

height: 100% 设置容器高度为屏幕高度

display: flex 启用 flex 盒子模型

flex-direction: column 设置 flex 盒子模型中的子元素按照从上到下的方向进行排列

flex-grow: 1 flex 盒子模型内的该元素将会占据父容器中剩余的空间

父元素必须有一个设定的高度

flex-grow: 1 可以应用到第一个或者第二个或者任意一个子元素上，被设置了该属性的子元素将会占据所有剩余的可用空间

浏览器支持

支持率： 99.5%
支持情况： https://caniuse.com/#feat=flexbox
⚠️：进行所有支持时需要提供前缀

返回总目录

每天 30 秒系列之 CSS

flex 属性是 flex-grow ， flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。

flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。