当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样：
html：
<div id="wrapper">
?<ul id="scroll"> ???<li>cell 1</li> ???<li>cell 2</li> ???<li>cell 3</li> ???<li>cell 4</li> ???<li>cell 5</li> ???<li>cell 6</li> ???<li>cell 7</li> ???<li>cell 8</li> ???<li>cell 9</li> ???<li>cell 10</li> ???<li>cell 11</li> ???<li>cell 12</li> ???<li>cell 13</li> ???<li>cell 14</li> ?</ul></div>
css：
#wrapper{ ???width: 100%; ???height: 60px;}#scroll{ ???height: 60px; ???white-space: nowrap; ???display: inline-flex;}#scroll li{ ???float:left; ???height: 60px; ???background: #eee; ???border: 1px solid #ddd; ???width: 100px; ???box-sizing: border-box;}#scroll:after{ ???content: " "; ???display: block; ???height: 0; ???font-size: 0;}这样写里面的子元素 scroll的宽度就可以随着li的增加减少而改变，在这里引用iscroll可以向右滑动
css 父元素的宽度随子元素的宽度变化
原文地址：https://www.cnblogs.com/siyecao2010/p/9202920.html