css 父元素的寬度隨子元素的寬度變化

當最外面的層想要設置一個 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可以向右滑動