在contenteditable div flex-item

Question

我正在努力让我满意的div做一些事情：

1. 取div和按钮之间的所有水平空间
2. 当单词之间的行变得太长时换行
3. 只有在单个长词
时才会在单词的中间换行

我得到1和2或1和3工作，但从来没有3个选项。

如果我使用

word-break:break-all;

它适用于冗长的单词，但是当我有一个正常的句子时，它不会包含在单词之间。

如果我不使用它，它会在单词之间切换，但不会在很长的单词之间切换。

如果我在chrome上使用它会按预期工作：

word-break:break-word;

但这似乎不是一个标准的论点。

＆＃13;
＆＃13;
article {
  display:flex;
  background-color:red;
  padding:1em 1em 1em 1em;
}
div {
  background-color:#fff;
  border:1px solid #000;
  flex:1 0 0px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  word-break:break-all;
}
＆＃13;
<article>
  <div contenteditable="true">
    Should cut only on space here mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
  </div>
  <span>SEND</span>
</article>
<br>
<br>
<article>
  <div contenteditable="true">
    Should_cut_anywhere_here_mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
  </div>
  <span>SEND</span>
</article>
＆＃13;
＆＃13;
＆＃13;