html - 如何使文本换行到 scrollWidth 而不是 clientWidth？

Question

注意:尽管有标题，但这个问题不包含 JavaScript，我只是使用这些术语来说明问题。

我有一个固定宽度的 div，有时里面的内容太宽，所以我将它设置为 overflow: auto，这样就可以正常工作了。但是，如果 div 同时包含文本和图像，并且图像太大而无法容纳而不会溢出，文本仍会换行到 div 可见部分的宽度 (clientWidth)，而不是它的完整范围 (scrollWidth)。这对我来说似乎很难看，但我不确定如何修复它。

简单地关闭文本换行也不是一个好的解决方案，因为如果文本比图像宽，那么文本将拉伸(stretch) div 超过必要的程度。

Example

Answer 1

有趣的问题。

这是迄今为止我能找到的唯一使用跨浏览器 css 的解决方法。

http://codepen.io/anon/pen/QKyGBr

.outer {
  margin: auto;
  width: 400px;
  overflow: auto;
}

.outer > div {
  display:table;
}

.outer > div > * {
  box-sizing:border-box;
  border: 5px outset red;  
  display:block;
  margin:0;
}

Flexbox 解决方案:

http://codepen.io/anon/pen/jrWVJY

.outer {
  margin: auto;
  width: 400px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.outer > div > * {
  display:block;
  border: 5px outset red;
  margin:0;
}

最小内容解决方案:

http://codepen.io/anon/pen/kkPLdR

.outer {
  margin: auto;
  width: 400px;
  overflow: auto;
}

.outer > div {
  width:min-content;
  width:-moz-min-content;
}

.outer > div > * {
  border: 5px outset red;  
  display:block;
  margin:0;
}