我可以根据同一容器中另一个元素的大小强制内联文本换行吗？

考虑这个 jsbin http://jsbin.com/ElIKOKe/3/edit?html,css,output.

我有这个html：

  <div class="container">
      <span>
        The lime outlined .container had two vertically stacked elements, this text (which is inline) and the salmon .fixed-width box which is block and has an explicit width and height set externally. I want .container to shrink to the size of .fixed-width and the inline content to wrap. I do not want to have to set an explicit width on .container.
      </span>
      <div>
        <div class="fixed-width"></div>        
      </div>
  </div>

和这个CSS

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
}

/*for debugging*/
.container { outline: 1px solid lime; }  
.container * { outline: 1px solid blue; }

我想要的是为了.container大小与.fixed-width without在其他地方显式设置它，从而使内联文本换行并且宽度不大于 200px。

我很确定这对于 css2 是不可能的，但我的浏览器要求非常现代（我在同一页面上使用 Flexbox），所以我希望有一种方法可以使用 css3 做到这一点。

如果需要的话，我愿意在这里引入一些新的标记。

缩小内容本身，<table>布局属性似乎就是您所需要的。

非常感谢这个问题，显示了我到目前为止没有注意到的 Blink Egine 的行为。

我们可以通过 CSS 使用这些属性，edit 如前所述，对于 Chrome/Opera 使用的 Blink 渲染引擎，需要解决方法 .

我们需要在父级上使用设置为 0 的宽度来尽可能缩小它，因为无论如何，它都会占用其父级宽度的 100%：

http://jsbin.com/UhOQEzOz/2/edit http://jsbin.com/UhOQEzOz/2/edit

.fixed-width {
  background-color: salmon;
  height: 200px;
  width: 200px;
  display:table;
  table-layout:fixed;
}

.container {
  outline: 1px solid lime;
  display:table-row;

}  
.container * {
    outline: 1px solid blue;
  }
article {
  width:0;
}

http://jsbin.com/UhOQEzOz/2/edit http://jsbin.com/UhOQEzOz/2/edit