Контейнер Flexbox не может быть доступен для контента в Chrome

Question

Атрибут contenteditable корректно работает в Chrome, за исключением случаев, когда редактируемый элемент также является контейнером flexbox. Что тут происходит?

<p>Can be edited in Chrome:</p> 
<div contenteditable="true"></div> 

<p>Cannot be edited in Chrome:</p> 
<div contenteditable="true" style="display:flex"></div> 

JSFiddle: http://jsfiddle.net/openjck/rhrxatst/3/

Answer 1

Demo

HTML

<p>Can be edited in Chrome:</p> 
<div contenteditable="true"></div> 
<p>Cannot be edited in Chrome:</p> 

<!-- you need to have a flex-box container and set display style flex to this container --> 

<div class="flexContainer"> 
    <div contenteditable="true" class="flexItem"></div> 
</div> 

CSS

/* respective css style for flexContainer and flexItem */ 
.flexContainer { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: flex; 
} 
.flexItem { 
    -webkit-flex: 1 auto; 
    -moz-flex: 1 auto; 
    -ms-flex: 1 auto; 
    flex: 1 auto; 
}