如何将文本换行设置为scrollWidth而不是clientWidth？

Question

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

我有一个固定宽度的div，有时其中的内容太宽，所以我将它设置为overflow: auto，这确实有效。但是，如果div包含文本和图像，一个太大而不能溢出的图像，文本仍然会包裹到div（clientWidth）的可见部分的宽度，而不是它的全部范围（scrollWidth）。这对我来说似乎很难看，但我不确定如何解决它。

简单地关闭文本包装也不是一个好的解决方案，因为如果它比图像宽，文本将拉伸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;
}