Flexbox容器在Chrome中无法满足要求

Question

contenteditable属性在Chrome中正常运行，除非editable元素也是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;
}