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

Question

考虑一下这个jsbin。

我有这个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大小相同，而不显式地将其设置到其他地方，从而使内联文本包装的宽度不超过200 in。

我确信这在css2中是不可能的，但是我的浏览器需求相当现代化(我在同一页上使用了flexbox )，所以我希望有一种方法可以用css3来实现。

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

Answer 1

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

非常感谢你提出的这个问题，我现在还没有注意到它的行为。

我们可以通过CSS使用这些属性，并编辑，正如注意到的那样，对于Chrome/Opera使用的闪烁渲染引擎，需要使用。

我们需要在父服务器上使用设置为0的宽度来尽可能地缩小它，因为无论发生什么情况，它都要占用其父级宽度的100%：

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