当元素大于最大宽度时，如何将元素缩小到所需的最小宽度？

Question

我正在构建一个HTML页面，该页面显示一个动态构建的复杂文档，其中包含来自此处的数据。在最后阶段，允许用户手动编辑某些字段，并将所做的任何更改异步提交给服务器，以验证和重新计算相关值。

如果任何验证规则失败，则应显示错误消息，说明该值无效的原因，以及有关如何解决该情况的提示。这些消息可能会变得非常大，甚至可能太大而无法放在一行中：

我可以强制段落以特定的最大宽度包裹，

#error-info > p
{
    max-width:450px
}

但是这个数字来自屏幕约束，而不是来自内容约束，因此对于某些特定文本可能不是最佳的，特别是如果这些文本包含长词：

我想要实现的是，如果段落包含多行，则它占用了所需的最小宽度而不是其定义的最大宽度：

但当然，我不知道设计时最佳最大宽度是多少。是否有可能让浏览器在布置元素时根据其内容进行计算？

我尝试将段落的display样式设置为多个inline-变体但未成功。我也读过5-year-old question，但给出的答案看起来很混乱，我想知道这方面是否有任何技术进步。

编辑：以下是我的代码遭受同样问题的摘录：

#error-info {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  font-size: 75%;
}

#error-info>.triangle {
  width: 0;
  height: 0;
  margin-left: 8px;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #c30c0c transparent;
  align-self: flex-start;
  margin-left: 5px;
}

#error-info>p {
  background-color: #ce0c0c;
  color: #f2f2f2;
  padding: 2px 5px 3px;
  margin: 0;
  box-shadow: 1px 1px 10px -2px #0000007f;
  box-sizing: border-box;
  max-width: 399px;
  border-radius: 2px;
}

<div id="error-info">
  <div class="triangle"></div>
  <p>A really really long explanation, full of unnecessary adjectives and clarifications, that does not quite fit comfortably in one line</p>
</div>