div内容宽度超出边界后怎样设置为左右滑动 而且不显示滚动条？

div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？

纯手写 滚动条隐藏掉就行了

CSS:

*{margin:0px;padding:0px;}.wrap{overflow: hidden;height: 40px;}.cont{height: 60px;overflow-x: auto;overflow-y:hidden ;position: relative;}.state {left: 0px;top: 0px;position: absolute;height: 60px;background-color: rgb(84, 46, 69);overflow-x: auto; white-space: nowrap;display: flex;}.state li{display: inline-block;float: left;font-size: 13px;text-decoration: none;color: #999;padding: 1px 5px;border-bottom: 2px solid rgb(84, 46, 69);}.state .active {font-weight: bold;color: #ff6c00; border-color: rgb(84, 46, 69);}

<div class="wrap"><div class="cont"><ul class="state"><li class="active">111</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li><li>222</li></ul></div></div>