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:子容器的宽;，这个问题就解决了。