Html 展开一个div'；直到所有的孩子都合身为止

我试图制作一个简单的滑块，因此我使用一个div（#容器）来保存我需要滑动的项目（这个div将具有overflow:hidden）、一个我想要移动的div（#滑块），以便将所有项目一起移动，以及适合滑块的div

我希望滑块的宽度扩展，直到所有项目都符合float:left的同一行

我有一个jsFiddle：我需要一些帮助来使同一行上的红色div和青色div扩展其宽度

你能帮我吗？

更新：

我做了这个，我想它符合你说的，我只在chrome上测试过

更新：秒

---

这几乎就是我所需要的，但是没有一种方法可以只用css来实现吗？我必须在那里添加动态加载的项目，它们的宽度将不一样..发布了一个更新。还没有跨浏览器测试，但我相信它应该可以工作。再次更新。这对你有用吗？在Firefox上测试很好。是的，这就是我要找的东西。谢谢不我需要黄色div保持固定宽度，青色div比黄色div宽

#container {
    width : 400px;
    height : 200px;
    position : relative;
    background : yellow;
    overflow: hidden;
}

#slider {
    margin : 5px;
    position : absolute;
    background : cyan;
    width: auto;
    height : 190px;
    white-space: nowrap;
}

#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    display: inline-block;
    background : red;
}

#container {
    background : yellow;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    position : fixed;
    width : 400px;
}
#slider {
    background : cyan;
    position : fixed;
}
#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    float : left;
    background : red;
}