I am facing a scenario where I have a fixed-position container element with two children. Both children contain text. The challenge is to dynamically adjust the width of the container based on one child's content, while ensuring that the other child's text wraps appropriately.
For instance:
.container {
position: fixed;
}
.wrap {
background: red;
}
.stretch {
background: green;
}<div class="container">
<div class="wrap">
this text is very very long
</div>
<div class="stretch">
shorter text
<div>
</div>In the above scenario, the goal is for the container's width to be in line with the shorter green .stretch div. Subsequently, the red .wrap div should also adapt its width accordingly and wrap the text inside it.