html flex 浮动失效,flex布局下overflow失效的原因

最近用flex布局排班时，发现overflow-x：scroll失效了，而且原本的元素宽度也被改变了，如下

.jfsc .shop_scroll .shop_top {

display: flex;

flex-direction: row;

flex-wrap: nowrap;

width: 100%;

overflow: hidden;

overflow-x: scroll;

overflow-y: hidden;

-webkit-overflow-scrolling: touch;

border-bottom: 1px solid rgba(255, 105, 0, .5);

}

.jfsc .shop_scroll .shop_top .cell {

height: 10.7vw;

line-height: 10.7vw;

text-align: center;

width: 21%;

margin: 0 2%;

color: #8c8c8c;

}

复制代码

每个子元素的宽度是21%，但是却没有溢出，后来查阅文档得知，是元素的宽度缩放了，只要设置flex-shrink: 0;就不会缩放了

.jfsc .shop_scroll .shop_top .cell {

height: 10.7vw;

line-height: 10.7vw;

text-align: center;

width: 21%;

margin: 0 2%;

color: #8c8c8c;

flex-shrink: 0;

}

复制代码

这样就可以滚动了

文档是这么说的：

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

还是要多看文档啊！！！