title: Prevent contenteditable (in flexed div) from expanding
body: <p>I'm starting with css flex and I have a hard time with using a contenteditable that I can't prevent from expanding horizontally when the text is too long. 
  I tried on:
   - Chrome
   - Firefox
   - Opera
   - Safari</p>
  
  <p>They all make the divs expand but Safari, who does what I expect.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="column"&gt;
          &lt;div class="field"&gt;
              &lt;div class="field_left"&gt;&lt;/div&gt;
              &lt;div class="field_middle" contenteditable="true"&gt;&lt;/div&gt;
              &lt;div class="field_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="field"&gt;
              &lt;div class="field_left"&gt;&lt;/div&gt;
              &lt;div class="field_middle" contenteditable="true"&gt;&lt;/div&gt;
              &lt;div class="field_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="field"&gt;
              &lt;div class="field_left"&gt;&lt;/div&gt;
              &lt;div class="field_middle" contenteditable="true"&gt;&lt;/div&gt;
              &lt;div class="field_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="column"&gt;
          &lt;div class="field"&gt;
              &lt;div class="field_left"&gt;&lt;/div&gt;
              &lt;div class="field_middle" contenteditable="true"&gt;&lt;/div&gt;
              &lt;div class="field_right"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.container
  {
      width: calc(100% - 34px);
      height:185px;
      margin-left:17px;
      margin-top:17px;
      display:flex;
  }
  
  .column{
      flex:1;
      height:186px;
      margin-right:1.75%;
  }   
  
  .column:nth-child(5){
      margin-right:0px;
  }
  
  .field{
      margin-bottom:5px;
      display:flex;
      width:100%;
  }           
  
  .field_left{
      width:6px;
      height:24px;
      background:green;
  }
  
  .field_middle{
      height:24px;
      background:red;
      width:calc(100% - 13px);
  }
  
  .field_right{
      width:7px;
      height:24px;
      background:blue;
  }
  
  [contenteditable]
  {
      display:inline;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: inherit;
     -webkit-user-select: auto;
             user-select:  auto;
        -moz-user-select: -moz-text;
  }
  </code></pre>
  
  <p>Of course, the HTML could be less complicated for such a result (divs into divs into divs) but keep in mind that I cleaned the code as much as possible in order to present it to you as the design asks for this.
  However, I decided to show the relevant part of structure as it might be important to fix the problem.</p>
  
  <p>Here is a JSFiddle of the result:</p>
  
  <p><a href="https://jsfiddle.net/b4er9tLg/2/" rel="nofollow noreferrer">https://jsfiddle.net/b4er9tLg/2/</a></p>
  
  <p>If you type a text into one of these boxes, when the text is long enough, it will expand its containing div and change the overall layout of the page.
  (if it doesn't do that on your browser, then your browser is one of the happy few).</p>
  
  <p>Basically, what I need is to get something like a hidden overflow on all browsers of text written so that the overall design won't break.
  I just can't get it to work.</p>
  
  <p>Thanks for your help.</p>