设置flex-shrink后flex子项仍溢出及align-content不生效问题

问题1：flex-shrink未生效、内容溢出原因 #

你给.card设置的弹性规则仅作用于类名为card的元素，但.cards容器的直接flex子项共有三个：绿色卡片、包裹红/黄卡片的无类名div、蓝色卡片。其中中间的无类名div没有应用.card类，默认flex-shrink值为1，宽度由内部两个堆叠的card元素撑开，不会按照你给.card设置的3倍比例收缩。
同时内部红、黄卡片的flex属性仅在中间div的布局上下文生效，不会参与外层.cards容器的弹性收缩计算。当容器宽度缩小到超过整体内容的最小可收缩宽度（即内部文字能显示的最小宽度）后，内容就会直接溢出。
另外你给.card同时设置了width:250px和flex-basis:0，flex布局中非auto值的flex-basis优先级高于width属性，这个写法本身也会导致你设置的width不生效。

问题2：align-content未生效原因 #

align-content属性仅对设置了flex-wrap: wrap且实际产生了多行内容的flex容器生效，作用是调整多行之间的交叉轴间距。你当前的.cards容器是默认的flex-wrap: nowrap，所有子项都排列在同一行，这种场景下控制交叉轴对齐应该使用align-items: center，替换属性即可实现预期的垂直居中效果。

内容的提问来源于stack exchange，提问作者xing Zì