<div class="container">
  <div class="box wrap-normal">
  Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.
</div>
<div class="box wrap-anywhere">
  Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.
</div>
<div class="box wrap-wordbreak">
  Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.
</div>
</div>
.container {
  display: flex;
}

.box {
  width: min-content;
  max-width: 150px;
  height: 200px;
  background: pink;
  padding: 10px;
  margin-right: 10px;
}

.wrap-normal {
  word-break: normal;
  overflow-wrap: normal;
}

.wrap-anywhere {
  word-break: normal;
  word-wrap: anywhere;
}

.wrap-wordbreak {
  word-break: normal;
  overflow-wrap: break-word;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.