flex 在html中显示不出来,css中使用flex布局让10个元素分两行显示的问题

我在使用弹性盒子布局的时候遇到一个问题，我有10个元素，想分成两行显示。但是我不想固定每个元素的宽度，我的代码如下，该如何修改呢。

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

css代码如下：

.mall-sell {

width: 100%;

overflow: hidden;

display: flex;

flex: 1;

flex-wrap: wrap;

position: relative;

}

.mall-sell .mall_sell-item {

flex: 1;

float: left;

position: relative;

height: 1.68rem;

line-height: 1.68rem;

text-align: center;

vertical-align: middle;

margin-top: 0.266666rem;

}

.mall-sell .mall_sell-item img {

display: block;

width: 1.2rem;

height: 1.2rem;

line-height: 0.146666rem;

text-align: center;

background-color: rgb(210,216,221);

}

.mall-sell .mall_sell-item p {

float: right;

width: 1.36rem;

height: 0.333333rem;

line-height: 0.333333rem;

font-family: PingFang-SC-Regular;

@include font-dpr(13px);

font-size: 0.346666rem;

text-align: center;

}

我现在是第一行显示7个，第二行显示剩余三个，不知道该怎么改。

谢谢