html

<div class="order-warp">
    <div class="order-status-view">
        <!--status start-->
        <div class="order-status lt-flexbox vertical">
            <div class="box-item">
                <p>第一项</p>
            </div>
            <div class="box-item">
                <p>第二项</p>
            </div>
            <div class="box-item">
                <p>第三项</p>
            </div>
            <div class="box-item">
                <p>第四项</p>
            </div>
            <div class="box-item">
                <p>第五项</p>
            </div>
            <div class="box-item">
                <p>第六项</p>
            </div>
        </div>
        
        <!--status end-->
    </div>
</div>

less

<style>
.order-warp { overflow: hidden; }

.lt-flexbox {
    display : -webkit-box;
    display : -ms-flexbox;
    display : -webkit-flex;
    display :         flex;
    &.vertical {
        -webkit-box-align : center;
        -ms-flex-align : center;
        -webkit-align-items : center;
                align-items : center;
    }
}
.order-status-view {
    overflow-x: scroll;
}
.order-status { width: auto; min-width: 100%; }
.box-item {
    min-width: 76px;
    height: 80px;
    p {
        text-align: center;
        font-size: 10px;
    }

}
</style>