Overflow Wrap in a Flex container

In this blog, we'll look at a very specific thing i.e. the use of overflow-wrap property inside a flex container. overflow-wrap is a very handy CSS property and I've used it in almost all of the projects that I've worked in.

In a nutshell overflow-wrap allows us wrap some overflowing content in places where it would not wrap by default. But let's explore this with the help of an example.

Getting Started

From the above example our focus would only be in the following snippet, everything else is just for styling.

<div class="card-body">
  <p class="card-body-content">
    The longest word in any of the major English language
    dictionaries is
    <span class="highlight">
      pneumonoultramicroscopicsilicovolcanoconiosis
    </span>
    , a word that refers to a lung disease contracted from
    the inhalation of very fine silica particles,
    specifically from a volcano; medically, it is the same
    as silicosis.
  </p>
</div>

So, by default if the text inside a container cannot fit the container (i.e. it overflows), then the text starts wrapping by introducing line breaks at normal word break points (like spaces).

And that is exactly what's happening currently, the text (card-body-content) inside the container (.card-body) overflows it and hence line breaks are introduced. But the word "pneumonoultramicroscopicsilicovolcanoconiosis" still overflows the container because there are no valid break points to wrap it.

Before we start using overflow-wrap let's try to make the container (.card-body) display: flex

Crap! Things get even worse now, but why? What's so different about flex?

<div class="card-body flex">
  <p class="card-body-content">
    Same content
  </p>
</div>

Flex relies on min-content and max-content intrinsic sizes to structure the layout. So, by default flex tries to fit in all the flex items in a single row wherein each item gets their max-content intrinsic size, but if doing so overflows the container then it starts shrinking the items (this behavior can be altered using the flex-shrink property on the flex items) and the items are shrank until they reach their min-content intrinsic size, after which the items start overflowing the container.

Now coming back to the example, the flex container is initially trying to fit its only item in a single row wherein the item gets a width equal to its max-content intrinsic size (and the max-content size is when the entire item is spread in a single line without any wrapping), but clearly that would overflow the container - so flex starts wrapping the item - but remember it would only wrap the item until it reaches its min-content intrinsic size (which is equal to the longest word in the item).

So, the width of the flex container here is equal to the width of the word "pneumonoultramicroscopicsilicovolcanoconiosis" and the line breaks that happen is based on this width (look at the image below).

Now that we have an understanding of how flex works, let's use the overflow-wrap property in our code and look at the following three scenarios:

• overflow-wrap: break-word in non flex container
• overflow-wrap: break-word in a flex container
• overflow-wrap: anywhere in a flex container

---

overflow-wrap: break-word in non flex container

<div class="card-body">
  <p class="card-body-content wrap-break-word">
    Same content
  </p>
</div>

break-word
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

So, from the definition above (except maybe the last sentence which we'll discuss next), it's quite clear that because our content is allowed to wrap at any arbitrary point there's no overflow.

---

overflow-wrap: break-word in a flex container

<div class="card-body flex">
  <p class="card-body-content wrap-break-word">
    Same content
  </p>
</div>

When we make the container a flexbox, overflow-wrap: break-word doesn't seem to have any effect. Let's look at the definition of overflow-wrap: break-word again, specifically the last sentence.

break-word
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.**

This means break-word is not shrinking the min-content intrinsic size of the flex item because of which the flex-item is still overflowing.

---

overflow-wrap: anywhere in a flex container

<div class="card-body flex">
  <p class="card-body-content wrap-anywhere">
    Same content
  </p>
</div>

anywhere
To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

When we use anywhere, it actually shrinks the min-content intrinsic of the flex item because of which the flex item is allowed to wrap and there's no overflow.

---

That's it for this blog! I understand that the example might be a little contrived and it might not click instantly, but I would suggest you go through it once again and play with the code, it will eventually start making sense. Also, put your thoughts in the comments!

Peace ✌