Flex布局中如何解决子项目尺寸不受flex-shrink影响的问题？

本文共计920个文字，预计阅读时间需要4分钟。

“预测是编写一个如下所示的布局内容：+ 有一个固定高度的容器，顶部的header已知高度，header占用了固定高度后，剩余的都分配给body部分。+ 由于采用flex布局，header设置flex-shrink为“

预期是写一个如下所示的布局内容：

即有一个固定高度的外部容器，顶部的header已知高度，在header占据了固定高度后，剩下的都分给body部分。因此采用flex布局，header设置flex-shrink为0，不自动收缩，body则flex-shrink为1，使其高度压缩为剩余高度。这个操作看起来挺符合直觉的。
然后在上述的body中有个content-wrapper内容块，设置height: 100%以及overflow: auto来让他高度占满父容器并且内容过多时生成滚动条。