How to wrap long lines in contenteditable div with flex

Question

I want to make my contenteditable div to:

Wrap the long lines text in it and wrap at end of words.

DEMO: https://jsfiddle.net/aisin/aL9fwggc/

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor" contenteditable="true">How can I wrap long lines here?</div>
    </div>
  </div>
</div>

Answer 1

You need to allow the .right to shrink, so if you change flex: 1 0 auto to flex-grow: 1 (or flex: 1 1 auto) the text will wrap

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 200px;
  height: 100%;
  background: #B1D27C;
}
.right {
  flex-grow: 1;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
}

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor"How can I wrap long lines here?  contenteditable="true">How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? </div>
    </div>
  </div>
</div>

---

Update based on a comment

If you have "Looooooooooooooooooooong" words you need to use word-break: break-all

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 200px;
  height: 100%;
  background: #B1D27C;
}
.right {
  flex-grow: 1;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
}

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor"How can I wrap long lines here?  contenteditable="true">How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? Loooooooooooooooooooooooooooooooooooooooooooooooooooooooong words </div>
    </div>
  </div>
</div>