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 的值

还是要多看文档啊！！！