flexbox：打破长文本，直到兄弟姐妹适合容器[重复]

Question

我有两个灵活的孩子。我不知道这些孩子的大小，但我希望 .right （其中包含未知但有限数量的例如状态图标）不会损坏并适合在线，而 .left 孩子（其中包含标签可能太长的文本）无法打破，以便 .right 孩子适合。

在 sn-p 中，.left 应该打破文本，以便 .right 适合。两个孩子都不应该溢出.container。

我可以通过在.left 上使用word-break: break-word 来完成此操作，但这是非标准的。我也可以使用word-break: break-all，但首先不会尝试在下一行换行（就像word-wrap 所做的那样），这是不可取的。 word-wrap: break-word 什么都不做。

如上所述，我不能在.left 上使用width: calc( 100% - <right-width> )，因为我不知道.right 孩子的宽度。

注意：孩子的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>

Answer 1

• left 上的 min-width: 0 确保元素不会 auto-resize 到父 flex 容器，并根据需要进行包装。它可以替换为overflow: hidden，它有same effect。

  如果留给auto（默认min-width flex 值），如果容器太大，它会溢出容器。 （感谢@Michael_B）

• flex: 1（flex: 1 0 0 或 flex-grow: 1; flex-shrink: 0; flex-basis: 0 的简写）确保 left 增长并将 right 元素向右推（感谢 @LGSon）

• right 具有初始 flex 值 (flex: 0 1 auto)，可确保它不会断字，也不会超过其内容大小。

  WTBS，如果太大，还需要word-wrap: break-word; min-width: 0，和左边一样。

注意：删除了不属于 OP 要求的 20px 高度。

.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>