让孩子自动展开水平滚动的 div

Question

我有我想要的here，但是我必须手动输入宽度。我想要一个父容器来保存包含子 div 的可拉伸 div。父容器是固定大小的。我需要可拉伸的 div 足够大以水平包含子 div。将可拉伸 div 设置为自动宽度不起作用，我不想手动设置大小。除了手动设置大小，还有其他选择吗？

#parent{
    width:50%;
    height:200px;
    background:red;
    overflow-x: scroll;
    overflow-y: hidden;
}

#stretchable-div{
    background:darkblue;
    /* width: 600px; works but don't want to manually size*/
    width: auto;
}

.child {
   background:blue;
   width: 100px;
   height: 150px;
   float:left;
}

Answer 1

如果你需要使可伸缩的 div 自动宽度，它必须由它的孩子决定。这与孩子的浮动属性冲突（浮动行为由它的父宽度决定）。所以你必须改变父母的宽度或孩子的浮动。

我可以使用 display: inline-block 和 nowrap 属性让孩子们排成一行。但是你必须在 IE7 下破解 inline-block。 示例为here。

暂时找不到很好的解决方案。只是给它一个提示。