clientWidthではなくscrollWidthにテキストを折り返すことができますか？

Question

注：タイトルにもかかわらず、この質問にはJavaScriptは含まれていません。問題を説明するためにこれらの用語を使用しています。

私は固定幅のdivを持っていますが、その中のコンテンツが広すぎる場合がありますので、overflow: autoに設定してください。正しく動作します。ただし、divにテキストと画像の両方が含まれていて、オーバーフローせずに収まらない大きすぎる場合、テキストは引き続きそのフルエクステント（scrollWidth）ではなく、divの表示部分の幅にラップされます（clientWidth）。これは私にとって非常に醜いようですが、私はそれを修正する方法がわかりません。

テキストの折り返しを単にオフにすることは良い解決策ではありません。なぜなら、テキストがイメージよりも広い場合には、必要以上にテキストが伸びるからです。

Example

Answer 1

興味深い質問。

これは、これまでクロスブラウザCSSを使用している唯一の回避策です。

http://codepen.io/anon/pen/QKyGBr

.outer { 
    margin: auto; 
    width: 400px; 
    overflow: auto; 
} 

.outer > div { 
    display:table; 
} 

.outer > div > * { 
    box-sizing:border-box; 
    border: 5px outset red; 
    display:block; 
    margin:0; 
} 

フレキシボックスソリューション：

http://codepen.io/anon/pen/jrWVJY

.outer { 
    margin: auto; 
    width: 400px; 
    overflow: auto; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
} 

.outer > div > * { 
    display:block; 
    border: 5px outset red; 
    margin:0; 
} 

ミンコンテンツソリューション：

http://codepen.io/anon/pen/kkPLdR

.outer { 
    margin: auto; 
    width: 400px; 
    overflow: auto; 
} 

.outer > div { 
    width:min-content; 
    width:-moz-min-content; 
} 

.outer > div > * { 
    border: 5px outset red; 
    display:block; 
    margin:0; 
}