html - How can I make text wrap to scrollWidth rather than clientWidth? -

note: despite title, question contains no javascript, i'm using terms illustrate problem.

i have div of fixed width, , content within wide, have set overflow: auto, , work properly. however, if div contains both text , image, 1 large fit without overflowing, text still wraps width of visible portion of div (clientwidth), rather full extent (scrollwidth). seems ugly me, i'm not sure how fix it.

simply turning off text wrapping not solution either, because text stretch div far more necessary if wider image.

example

interesting question.

this workaround find far uses cross browser 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; } 

flexbox solution:

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; } 

min-content solution:

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; }