flexbox: break long text until sibling fits in container [duplicate] - html

Question

This question already has answers here:
Word-wrap in flexbox is not respecting 100% width limit [duplicate]
(2 answers)
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I have two flex children. I don't know the size of those children, but I want the .right (which contains unknown, but finite number of e.g. status icons) to not break, and fit on line, while .left child (which contains label of potentially too-long text) to break so that the .right child fits.
In the snippet, the .left should break the text so that the .right fits. Neither of the two children should overflow the .container.
I'm able to accomplish this by using word-break: break-word on .left, but that's non-standard. I can also use word-break: break-all, but that doesn't try to wrap the word on next line (as word-wrap does), first, which is undesirable. word-wrap: break-word doesn't do anything.
As stated, I cannot use width: calc( 100% - <right-width> ) on .left, because I don't know width of .right child.
note: the children's height: 20px is just to see the parent container. It's not part of the requirement.
Bonus: in the example the width of .container is known, but it may potentially not be known, either (i.e. it may inherit it in some way).
.container {
display: flex;
width: 200px;
height: 40px;
background: pink;
}
.left {
background: rgba(0,255,0,.1);
height: 20px;
// word-break: break-word; // works in WebKit, but non-standard
word-wrap: break-word;
}
.right {
background: rgba(0,0,255,.1);
height: 20px;
}
<div class="container">
<div class="left">xoxoxoxoxoxoxoxoxoxoxoxoxoxoxox</div>
<div class="right">rarararara</div>
</div>

Answer 1

the min-width: 0 on left ensures the element doesn't auto-resize to the parent flex container, and wraps as needed. It can be substituted with overflow: hidden, which has same effect.
If left to auto (default min-width flex value), it would overflow the container if it got too big. (thanks #Michael_B)
flex: 1 (shorthand for flex: 1 0 0, or flex-grow: 1; flex-shrink: 0; flex-basis: 0) ensures the left grows and pushes the right element to the right (thanks #LGSon)
right has initial flex values (flex: 0 1 auto) which ensures it doesn't word-break and doesn't grow above its content size, either.
WTBS, if it gets too big, it will also need word-wrap: break-word; min-width: 0 same as left.
Note: removed the 20px height which was not part of the OP requirement.
.container {
display: flex;
width: 200px;
background: pink;
}
.left {
background: rgba(0,255,0,.1);
word-wrap: break-word;
min-width: 0;
flex: 1;
}
.right {
background: rgba(0,0,255,.1);
}
<div class="container">
<div class="left">aaaaaaaa bbbbbbbbbbbbbbbbbbbb</div>
<div class="right">cccccc ccccc</div>
</div>