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

Question

Consider this 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 像素。

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

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

Answer 1

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

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

我们可以通过 CSS 使用这些属性，编辑 正如所注意到的，对于 Chrome/Opera 使用的 Blink 渲染引擎，需要一个解决方案。

我们需要在父级上使用一个设置为 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