【Vue移动端实现横向排列内容，超出部分隐藏，并且滚动展示】

Vue移动端实现横向排列内容，超出部分隐藏滚动展示，并且隐藏滚动条

当ui给我们一个设计图，如何展示如下功能：

html部分

   <div id="father">
        <div id="children">
            <div class="children1"> </div>
            <div class="children2"> </div>
       </div>
   </div>

style部分

<style>
    #father{
        display:flex;
        flex-direction:space-between;
        overflow-x:auto;
       
    }
    #children{
       display: inline-block;
        flex-shrink: 0
    }
    ::webkit-scrollbar{
        display:none;
    }
</style>

成果展示：
首先展示的是一个电话，在滑动可以展示第二个


原创：转载于：https://www.jianshu.com/p/a1047b7f89b2