Flexbox 内で空のテーブル列を使用する: nowrap

Question

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

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

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

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

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

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

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

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

リーリー リーリー

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

Answer 1

これを回避するには、vw 単位を使用して幅を .text に割り当てます。

たとえば、width: 50vw; を .text

に単純に追加すると、これが発生します。

リーリー リーリー

Answer 2

デフォルトでは、テーブルの幅は内容に応じて調整されます。 テーブル レイアウト更新アルゴリズム: 修正 ; を使用し、幅を制限するには width: 100%; を追加する必要があります:

リーリー リーリー