如何强制父div水平拉伸以容纳浮动的子div？

Question

我希望蓝色div(如下面的小提琴所示)位于红色div的右侧.相反,它在下面.如果我将父母设置为overflow: hidden,它仍然在下面,只是隐藏它.

编辑:在简化我的代码时,我遗漏了display: table我的文本div.我在这里补充说: http ://jsfiddle.net/z1385n05/3/

http://jsfiddle.net/z1385n05/

http://jsfiddle.net/z1385n05/1/(带overflow: hidden)

HTML:

<div class="outer">
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
    </div>
</div>

CSS:

.outer
{
    position: relative;
    width: 320px;
    height: 480px;
    border: solid 1px #cccccc;
}

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: visible;
}

.child1
{
    position: relative;
    width: 30px;
    height: 100%;
    float: left;
    background-color: red;
}

.child2
{
    position: relative;
    height: 100%;
    float: left;
    background-color: blue;
    white-space: nowrap;
    overflow: hidden;
    display: table;
}

.child span
{
    position: relative;
    width: 100%;
    vertical-align: bottom;
    display: table-cell;
}

Answer 1

在您更新了问题后,如果您设置了父级display:table和,则可以实现此目的.child2 display:table-cell

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: hidden;
    display:table;/*Add this*/
}

.child2
{
    position: relative;
    height: 100%;
    background-color: blue;
    white-space: nowrap;
    display: table-cell;/*Add this*/
    overflow: hidden;
}

小提琴