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能夠向右滑動