Overflow Wrap in a Flex container
Tags: css, webdev, programming
Published: 2022-01-07 15:58:36

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

{% codepen https://codepen.io/ssmkhrj/pen/ZEXRXdq %}

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

```html
<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.

![overflow-normal-no-flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dh26mvp4da5nyvtlwgz.png)

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?

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flzhzmyppvbjzq4k2wel.png) 

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_).

![min-content-intrinsic-size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n18hnrpz4kec5z0wye5c.png) 

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

<hr />

## `overflow-wrap: break-word` in non flex container

```html
<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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl9geh0r7eysba6n4rkz.png)

<hr />

## `overflow-wrap: break-word` in a flex container

```html
<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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7lb8r1qryhw0v2nghv2.png)  

<hr />

## `overflow-wrap: anywhere` in a flex container

```html
<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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w0dlwiq79vukv12404r.png)

<hr>

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 ✌