How to shrink an element to its minimum required width when it is greater than its max-width?

Question

I am building an HTML page that displays a complex document constructed on the fly with data coming from here and there. In the last stage, the user is allowed to manually edit some fields and any changes made are submitted asynchronously to the server for validation and recalculation of dependant values.

If any validation rule fails, an error message should be displayed, explaining the reason why the value is not valid, as well as hints on how to resolve the situation. These messages can get quite large, maybe even too large to fit in one line:

I can force the paragraph to wrap at a specific maximum width,

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

but that number comes from screen constraints, not from content constraints, so it may not be optimal for some specific texts especially if those contain long words:

What I would like to achieve is that, if the paragraph wraps into multiple lines, it occupied its minimum required width instead of its defined maximum width:

But of course, I don't know what the optimal maximum width is at design-time. Is it possible to let the browser calculate it while it is laying out the element, based on its content?

I have tried setting the paragraph's display style to multiple inline- variants without success. I have also read this 5-year-old question but the answer given looks messy and I wonder if there are any technological advancements in this area.

EDIT: Here is an excerpt from my code suffering from the same problem:

#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>