css怎么写 div 显示横向滚动条

最终效果可以看看苹果官网用手机打开的顶部滑动菜单，以下是我写的一个演示DEMO

HTML:

<div class="container-wrap">
    <div class="container">
        <div class="box-1">hello</div>
        <div class="box-2">hello2</div>
        <div class="box-3">hello3</div>
    </div>
</div>

CSS:

.container-wrap {
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll; /* 1 */
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch; /* 2 */
    text-align: justify; /* 3 */
    &::-webkit-scrollbar {
        display: none;
    }
}

.container {
    
}
.container > div {
    display: inline-block;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.box-1 {
     width: 80%;   
}
.box-2 {
     width: 20%;   
}
.box-3 {
     width: 20%;   
}