私たちの設計では、省略記号付きのタイトルを表示するために複数の列が必要になりますが、これは大したことではないと思いますが、それらが の中にネストされているとdisplay: table、計算が正しくないように見えます。
注意点は、レスポンシブ レイアウトが必要なため、パーセンテージ幅が必要であるということです (幅を固定すると問題が解決します)。また、私たちのレイアウトにはツリーのさらに上位が必要であり、display: table大幅なリファクタリングなしでは削除できません。
ディスプレイを削除すると、すべてが期待どおりに機能します。
ただし、その表示により、親は、事前に切り捨てられた子要素の合計幅を考慮に入れます (ただし、nowrap は考慮されます)。オーバーフローが定義されていない状態で最初のレンダリングが行われ、事後にそれを追加するかのようです (ただし、その時点では、幅の計算が大きすぎます)。
レンダリングが壊れている理由は推測できますが、ブラウザーがこれをどのようにレンダリングするかについて、より明確な答えが欲しいです... (Mac の Chrome/FF/Safari でテスト済み)