<分区>
我有两个灵活的 child 。我不知道那些 child 的大小，但我想要 .right (其中包含未知但数量有限的状态图标)不会中断，并且适合在线，而 .left子项(包含可能太长文本的标签)中断，以便 .right适合 child 。
在代码片段中，.left应该打破文本，以便 .right适合。这两个 child 都不应该溢出 .container .
我可以使用 word-break: break-word 来完成此操作在 .left ，但这是非标准的。我也可以使用 word-break: break-all , 但它不会首先尝试将单词换行(如 word-wrap 所做的那样)，这是不可取的。 word-wrap: break-word什么都不做。
如前所述，我无法使用 width: calc( 100% - <right-width> )在 .left ，因为我不知道 .right 的宽度 child 。
注: child height: 20px只是为了查看父容器。这不是要求的一部分。
奖励:在示例中 .container 的宽度是已知的，但也可能不为人所知(即它可能以某种方式继承它)。
.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>