解决Flexbox布局在缩小尺寸时会丢失比例

添加以下css代码：

* {
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

解释：需要考虑以下两个概念。

flex 容器的初始设置是flex-shrink: 1.
这意味着，默认情况下，允许 flex 项目缩小到任何定义的width,height或之下flex-basis。
为防止这种行为，请使用flex-shrink: 0.

弹性项目的初始设置是min-width: auto.
这意味着，默认情况下，弹性项目不能小于其内容的大小（无论flex-shrink或flex-basis）。
允许弹性项目缩小超过其内容使用min-width: 0（行方向）、min-height: 0（列方向）或overflow: hidden（其他值也有效，除了visible）。