Css 固定宽度容器内具有溢出的内联块元素：hidden get Pushdown

请看我的小提琴：

HTML：

<div class="row">
    <div class="actionPanel"></div><div class="resultPanel"></div>
</div>

我想将resultpanel“滑动”到右侧（因此它仍然与actionPanel处于同一级别），但它会被向下推到视图之外

在javascript中，actionPanel的宽度变大了，因此两个元素的总宽度大于父元素的宽度

有人知道我怎样才能达到我想要的效果吗？我尝试过使用浮动元素，但结果是一样的。我还尝试使用table元素，但没有效果

---

提前感谢。

将

空白：nowrap

添加到内联块元素的容器中，在本例中为

.row

更改css:

body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel { 
height: 50px; 
background: #ddd; 
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}

body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel { 
height: 50px; 
background: #ddd; 
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}