flex-shrink: 0;看起来好像没起作用？请问这是为什么？

Question

HTML

<div class="app">
    <div class="wrap">11</div>
</div>

CSS

html,body{
    margin: 0;
    padding: 0;
}
.app{
    width: 100vw;
    display: flex;
    justify-content: center;
}
.wrap{
    width: 1440px;
    height: 900px;
    flex-shrink: 0;
}

如上代码，当给app设置display：flex之后，正常情况如图所示：

但是当我把浏览器缩小到1440以下时，检查元素显示wrap的宽度仍然是1440，但是左上角的11却看不见了，请问这是为什么？

Answer 1

我知道了，正确做法应该是，当父容器用了display:flex; justify-content:center;并且子容器有固定宽度时，那么应该给父容器加上min-width:子容器的宽;，这个问题就解决了。

Answer 2

11为什么看不到，这属于flex布局一大坑吧。
因为flex容器的溢出就是这样不讲道理。（为什么会溢出？因为子项设置了flex-shrink和width）
溢出了给你一个滚动条，然而justify-content: center这句代码导致滚动条始终无法滚动到内容最开始的位置，改为默认的justify-content: flex-start就可以看到这个11。

这确实是一个大坑，并且在flex前提下没有什么好的解决办法（至少2年来我没有找到）。

flex-shrink表示，当空间不足时，当前项不会被挤压。