css 父元素的宽度随子元素的宽度变化

<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>

#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;
}