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>
答案 0 :(得分:0)
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;
}