flexbox内でtext-overflowが効かない

flexbox内でtext-overflowが効かない現象に遭遇したので、対応方法をメモしておきます。

サンプルコード

下記サンプルのように、.flex-itemに対してtext-overflowを指定している場合、中のテキストは省略されます。

HTML

<div class="flex">
	<div class="flex-item">ほげ</div>
	<div class="flex-item text-overflow">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
</div>

CSS

.flex {
	display: flex;
}
.flex-item {
	padding: 10px;
	border: #ccc 1px solid;
}
.flex-item:nth-child(2) {
	flex-grow: 1;
}
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flex-itemに対して指定した場合のデモページ
　

上記サンプルを少し変更して、.flex-itemの子要素に対してtext-overflowを指定した場合、テキストの省略がされません。

HTML

<div class="flex">
	<div class="flex-item">ほげ</div>
	<div class="flex-item">
		<p class="text-overflow">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
	</div>
</div>

.flex-itemの子要素に対して指定した場合のデモページ
　

対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。

CSS

.flex-item:nth-child(2) {
	flex-grow: 1;
	min-width: 0;
}

対応後のデモページ
　

もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。

CSS

.flex-item:nth-child(2) {
	flex-grow: 1;
	overflow: hidden;
}

対応後のデモページ2
　

【参考サイト】

• Flexbox内のテキストを一行表示にして余った文字を省略表示する方法 | Web制作ナビ