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

时间:2014-12-16 02:40:52

标签: css layout web contenteditable flexbox

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/

1 个答案:

答案 0 :(得分:0)

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;
}