<div class="container">
  <p class="max-content">
    The width is set to max-content, which will break the container’s bounding box
  </p>
</div>

<div class="container">
  <p class="min-content">
    The width is set to min-content, which will shrink to the largest word
  </p>
</div>

.container {
  background-color: rgb(19 78 74 / 0.1);
  padding: 0.5rem;
  width: 12rem;
}

.container p {
  color: rgb(55 65 81);
  font-size: 0.75rem;
  margin: 0;
}

p.max-content {
  width: max-content;
}

p.min-content {
  width: min-content;
}