flex scroll 无效 与flex:1 无效问题以及flex:1底部图片显示不完全

开发图片选择组件的时候，遇到了这两个问题。我css一般选择使用flex。方便快捷。但是有时候总会出错。这次来解决一下flex与scroll在一起无效的问题和flex:1但是内容会超出父组件的问题。

• flex与scroll在一起无效的问题        

        这个我这次遇到的原因是：Vue默认不会使用flex，所以需要在最外层组件和父组件设置display：flex(经常忘记，只有在需要改变主轴方向的时候才会想起。)所以需要在整个页面最开始使用

display:flex;flex:1.flex-direction: column;

.然后子组件才不会出现scroll无效的问题。

• flex:1但是内容会超出父组件的问题（这个问题也有可能体现为可以滑动，但是发现最底部的图片显示不完全。）

        这个的主要导致原因就是上面的问题，需要将最外层组件和父组件设置成为display:flex；overflow:auto。

• 将图片展示为长宽都是一样的，并且每行展示4个。(将容器overflow:auto,然后计算里面盒子的大小，然后将图片以绝对定位方式放入)

.itemContainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 5vmin;
  overflow: auto;
  flex:1;
  /*height: 0;*/
  /*height: 100%;*/
}
.itemImg{
  position: relative;
  width: calc(25% - 5px);
  height: 0;
  padding-top: calc(25% - 5px);
  margin-top: 2vmin;
}
.itemImg img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius: 1.5vmin;
}