如何删除因缩小以适合元素而自动换行引起的额外空间？

Question

我正在尝试使用收缩来适应#container。它可以完美地工作，直到它包含的元素换行为止。这会使其扩展到 180 像素。

#screen-dimensions 
{
  width: 250px;
  height: 100px;
  background-color: yellow;
}

#container
{
  display: table;
  background-color: pink;
  border: 5px solid red;
}

#container > div
{
  display: inline-block;
  width: 160px;
  background-color: lightblue;
  border: 5px solid blue;
}

<div id="screen-dimensions">
  <div id="container">
    <div>content</div>
    <div>content</div>
  </div>
</div>

我明白为什么会出现这种行为，但我无法找到任何解决方法。

这可以解决吗？

Answer 1

我通过调整显示属性来实现这一点：

#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

请参阅： http: //jsfiddle.net/feeela/Anc3v/