Can a div element be resized when word wrap occurs? To illustrate, take a look at this example from a similar query:
.mypost {
border: 1px solid Peru;
margin: auto;
min-width: 200px;
display: inline-block;
background: red;
}
.test {
margin: 10px;
background: cyan;
}<div class="mypost">
<div class="test">I represent the imagdfv fdvdsdfsdfve.</div>
</div>If you resize the window to cause word wrapping, an empty blue space will appear to the right of the text. I would like the blue area to shrink until it reaches the end of the first line.
https://i.sstatic.net/fWKfj.png
(The image demonstrates forcing word wrap and I want the blue area to decrease.)
Is this achievable?