Flexbox コンテナ内の空白の nowrap テキストがページからはみ出しています。

CSS レイアウトで奇妙なエッジケースに遭遇したようです。

テーブルがあり、1 つの列に 2 つの列を持つフレックス コンテナーがあります。最初の列には選択範囲が含まれており、2 番目のテキストは 1 行に収める必要があり、長すぎる場合は省略記号で終わります (テキストは動的です)

明確にしておきますが、私はテーブル HTML を制御できません。 HTML を追加できるのは列内のみです。

フレックスボックス内のテキスト オーバーフローは一般的な問題のようですが、私の場合は通常の解決策がすべて機能しませんでした。私が試したこと:

• 最小幅を追加: 0; フレキシブル コンテナ
• 弾性収縮を追加: 0; テキストを含むフレックスボックス
• 弾性成長を追加: 1; 選択を使用してボックスを展開します
• 小さいものがたくさん (コンテナの幅が 100% など)

これは、さまざまな stackoverflow 記事で見つけたすべての解決策ですが、私にとっては何もうまくいきませんでした。フレックス コンテナーがテーブルの外にある場合は、すべてが正常に機能しますが、やはり、それは私にとって選択肢ではありません。

これで私の言いたいことが明確になります:

リーリー リーリー

このソリューションは最新のブラウザーでのみ機能するか、特定のブラウザーが必要な場合でも機能することに同意します。