◆ anywhere に対応してないので未指定と同じで折り返してくれない
◆ break-word だと flexbox で問題が出る
◆ overflow: hidden と組み合わせれば anywhere と同じ動きにできた
iOS で表示崩れがあるなと思って調べてみたら iOS では CSS の overflow-wrap の anywhere に対応してませんでした

overflow-wrap

overflow-wrap は はみ出るときの折返しを指定するものです
デフォルトの normal 以外に anywhere と break-word があります

どっちでもはみ出したら折り返してくれるのですが 最小コンテンツの固有サイズを計算するときにはみ出しによる折り返しを考慮するかどうかの違いがあるようです
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

最小サイズの計算が影響するところといえば flexbox が思い当たります
試してみるとわかりやすい違いが出る例を見つけました

<!doctype html>

<style>
.container {
	display: flex;
	align-items: flex-start;
	width: 200px;
	background: plum;
	margin: 10px;
}
.item {
	padding: 5px;
	border: 1px solid crimson;
	margin-bottom: 10px;
}
.first {
	flex: none;
}
.second {
	flex: 1 1 0;
}
.breakword {
	overflow-wrap: break-word;
}
.anywhere {
	overflow-wrap: anywhere;
}
</style>

<div class="container">
	<div class="item first">col1</div>
	<div class="item second breakword">
		col2 ##############################
	</div>
</div>
<div class="container">
	<div class="item first">col1</div>
	<div class="item second anywhere">
		col2 ##############################
	</div>
</div>

表示すると下の画像のようになります

ofw-01

breakword だとはみ出していて anywhere だと折り返して収まっています
anywhere だと overflow-wrap による折り返しを考慮して最小サイズが決まるので収まるように折り返されます
break-word だと考慮されないので折り返さない幅が最小とみなされるので はみ出してしまいます
flexbox の shrink を 1 にしても最小サイズよりは小さくならないので こういう場合は anywhere にする必要があります

iOS の場合

iOS では現時点の最新版の 14 でも anywhere がサポートされていません
anywhere は不正なものなので未指定と同じです

⇩確認用

<!doctype html>

<style>
.content {
	width: 100px;
	background: plum;
	margin: 10px;
}
.breakword {
	overflow-wrap: break-word;
}
.anywhere {
	overflow-wrap: anywhere;
}
</style>

<div class="content">
	#################
</div>
<div class="content breakword">
	#################
</div>
<div class="content anywhere">
	#################
</div>

iOS 以外の Chrome でみるとこうなります

ofw-02

iOS の場合は 1 つめと 3 つめが同じ表示ではみ出した表示になります

対処方法

iOS で対応してない以上 どうしようもない気もしたのですが 崩れていて見づらいのをどうにかしたくていろいろ試していると折り返すことができました
はみ出した部分を 「overflow: hidden」 で非表示にすると そのままはみ出た部分が非表示になるのではなく 親をはみ出さないサイズを最小サイズとしてくれるようで break-word と一緒に指定すると折り返すことができました

<!doctype html>

<style>
.container {
	display: flex;
	align-items: flex-start;
	width: 200px;
	background: plum;
	margin: 10px;
}
.item {
	padding: 5px;
	border: 1px solid crimson;
	margin-bottom: 10px;
}
.first {
	flex: none;
}
.second {
	flex: 1 1 0;
}
.breakword {
	overflow-wrap: break-word;
}
.anywhere {
	overflow-wrap: break-word;
	overflow: hidden;
}
</style>

<div class="container">
	<div class="item first">col1</div>
	<div class="item second breakword">
		col2 ##############################
	</div>
</div>
<div class="container">
	<div class="item first">col1</div>
	<div class="item second anywhere">
		col2 ##############################
	</div>
</div>

.anywhere セレクタに指定しているスタイルが変わっています

ofw-03

iOS でもその他でも親をはみ出さないサイズで折り返しを行えます