flex-shrink: 0;看起来好像没起作用？请问这是为什么？
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却看不见了，请问这是为什么？
回答
我知道了，正确做法应该是，当父容器用了display:flex; justify-content:center;并且子容器有固定宽度时，那么应该给父容器加上min-width:子容器的宽;，这个问题就解决了。
11为什么看不到，这属于flex布局一大坑吧。
因为flex容器的溢出就是这样不讲道理。（为什么会溢出？因为子项设置了flex-shrink和width）
溢出了给你一个滚动条，然而justify-content: center这句代码导致滚动条始终无法滚动到内容最开始的位置，改为默认的justify-content: flex-start就可以看到这个11。
这确实是一个大坑，并且在flex前提下没有什么好的解决办法（至少2年来我没有找到）。
flex-shrink表示，当空间不足时，当前项不会被挤压。
以上是 flex-shrink: 0;看起来好像没起作用？请问这是为什么？ 的全部内容， 来源链接： utcz.com/a/62777.html
