解决flex布局时子元素height属性失效的问题

对于设置了父元素为flex布局的子元素而言，如果没有设置flex-shrink，那么子元素可能会被它的兄弟元素所挤压，是的子元素的高度失效。

// 采用tailwindcss写法
<div class="flex flex-col overflow-scroll">
    <div class="Title w-full h-12 bg-red-400">Title</div>
    <div class="Nav w-full h-12 bg-gray-400">Nav</div>
    <div class="Breadcumbs w-fulll h-12 bg-blue-400">首页/家用涂料</div>
    <div>多个列表</div>
</div>

上面是一个父盒子，设置了flex属性表示它是一个flex容器。内部装了三个子盒子，均设置了高度，下面则是多个列表项。
如果列表项的数目足够多，将页面撑满后会使得上面三个子盒子的高度失效，变成跟随子盒子内文字高度。

子元素heigth属性失效，是因为被flex-grow影响了。
flex-grow属性定义了项目的放大比例，默认为1，即如果空间较大，该项目将放大。
如果所有项目的flex-grow属性都为1，当空间较大时，都将等比例放大。如果一个项目的flex-gorw属性为0，其他项目都为1，则空间较大时，前者不放大。
负值对该属性无效。

拓展知识

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

综上得出解决办法：本项目中给想要不受影响的子元素设置flex-grow:0;

<div class="flex flex-col overflow-scroll">
    <div class="Title flex-shrink-0 w-full h-12 bg-red-400">Title</div>
    <div class="Nav flex-shrink-0 w-full h-12 bg-gray-400">Nav</div>
    <div class="Breadcumbs flex-shrink-0 w-fulll h-12 bg-blue-400">首页/家用涂料</div>
    <div>多个列表</div>
</div>