Css 防止contenteditable（在flexed div中）展开

我从css flex开始，我很难使用contenteditable，当文本太长时，我无法阻止它水平扩展。 我试过： -铬 -火狐 -歌剧院 -狩猎

除了Safari，他们都让Div扩张了，我希望Safari能做到这一点

以下是HTML：

<div class="container">
    <div class="column">
        <div class="field">
            <div class="field_left"></div>
            <div class="field_middle" contenteditable="true"></div>
            <div class="field_right"></div>
        </div>
    </div>

    <div class="column">
        <div class="field">
            <div class="field_left"></div>
            <div class="field_middle" contenteditable="true"></div>
            <div class="field_right"></div>
        </div>
    </div>

    <div class="column">
        <div class="field">
            <div class="field_left"></div>
            <div class="field_middle" contenteditable="true"></div>
            <div class="field_right"></div>
        </div>
    </div>

    <div class="column">
        <div class="field">
            <div class="field_left"></div>
            <div class="field_middle" contenteditable="true"></div>
            <div class="field_right"></div>
        </div>
    </div>
</div>

当然，对于这样的结果，HTML可能不那么复杂（div-into-divs-into-divs），但请记住，我尽可能地清理了代码，以便在设计要求时向您展示它。 但是，我决定展示结构的相关部分，因为修复问题可能很重要

下面是结果的一部分：

如果在其中一个框中键入文本，当文本足够长时，它将展开其包含div并更改页面的总体布局。 （如果它在你的浏览器上做不到这一点，那么你的浏览器就是其中之一）

基本上，我需要的是在所有编写文本的浏览器上获得类似于隐藏溢出的内容，这样整体设计就不会中断。 我就是不能让它工作

---

谢谢您的帮助。

您已经提供了

.column

属性

flex:1

。根据规范

flex:
相当于flex:10。使弹性项目具有灵活性，并将弹性基础设置为零，从而生成 接收flex中指定比例的可用空间 容器。如果flex容器中的所有项都使用此模式，则它们的 尺寸将与指定的弯曲系数成比例

要防止

列

及其内容扩展，需要为其指定一个

最大宽度

值

我还建议从

列

中删除

右边距

。相反，在容器上设置列宽并使用

justify content

属性

.container{
宽度：计算（100%-34px）；
高度：185px；
左边距：17px；
利润上限：17像素；
显示器：flex；
证明内容：之间的空间；
}
.栏目{
弹性：1；
高度：186px；
最大宽度：19%；
}
.场{
边缘底部：5px；
显示器：flex；
宽度：100%；
}
.field_左{
宽度：6px；
高度：24px；
背景：绿色；
}
中区{
高度：24px；
背景：红色；
宽度：钙（100%-13px）；
}
.field_对{
宽度：7px；
高度：24px；
背景：蓝色；
}
[内容可编辑]{
显示：内联；
空白：nowrap；
溢出：隐藏；
文本溢出：继承；
-webkit用户选择：自动；
用户选择：自动；
-moz用户选择：-moz文本；
}

您能不能在列中添加一个宽度？正如我所说，我正在学习flex，就我目前所知，我认为父级上的display:flex足以在所有列之间分配适当的宽度。令我感到奇怪的是，无论容器的宽度如何，一个隐藏的覆盖物都不足以防止他呻吟到您的

。列

规则修复该问题，并且可以在dupe链接中找到原因。这是最新的提琴：非常好，谢谢@BachirMessaouri这绝对不是真正的原因，dupe解释了这里发生的事情。但有一个问题：如何从1.75%的保证金权利（即总空位为7%）变为95%的最大宽度？是因为你或多或少（19%而不是18.6%），还是因为我应该考虑到什么，才造成了这种差异？@BachirMessaouri正如我之前评论的那样，给出的答案不是正确的方式，也不是你出现问题的原因，只需检查此示例，在CSS中评论我所做的更改，dupe链接解释了为什么会发生这种情况。@BachirMessaouri另外，不建议使用带百分比的边距，因为它可以在不同的浏览器上给出不同的结果，在这种情况下，您可以使用

vw

。

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