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

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

我有一个固定宽度的div，有时其中的内容太宽，所以我将其设置为

溢出：auto

，这确实可以正常工作。但是，如果div同时包含文本和图像（图像太大，无法容纳而不会溢出），则文本仍会环绕到div可见部分的宽度（

clientWidth

），而不是其全部宽度（

scrollWidth

）。这对我来说似乎很难看，但我不知道如何修复它

简单地关闭文本换行也不是一个好的解决方案，因为如果div比图像宽，那么文本将远远超出必要的范围

有趣的问题

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

Flexbox解决方案：

最小内容解决方案：

---

好的解决方案-使用flexbox，除非将宽度应用于图像，而不是

外部
flexbox解决方案，否则无法获得滚动条：我认为不使用包装器元素是不可能的
.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;
}

.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;
}

.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;
}