防止 contenteditable（在 flexed div 中）扩展

Question

我从 css flex 开始，我很难使用 contenteditable，当文本太长时我无法阻止它水平扩展。我试过： - Chrome - 火狐 - 歌剧 - 野生动物园

它们都使 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>

这里是 CSS:

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

当然，对于这样的结果，HTML 可能不那么复杂（divs 变成 divs 变成 divs）但请记住，我尽可能多地清理代码，以便按照设计要求将其呈现给您。但是，我决定展示结构的相关部分，因为它可能对解决问题很重要。

这是结果的 JSFiddle：

https://jsfiddle.net/b4er9tLg/2/

如果您在其中一个框中键入文本，当文本足够长时，它会扩展其包含 div 并更改页面的整体布局。（如果它没有在您的浏览器上执行此操作，那么您的浏览器就是其中之一）。

基本上，我需要的是在所有浏览器上编写隐藏溢出之类的东西，这样整体设计就不会中断。我只是无法让它工作。

感谢您的帮助。

Answer 1

你给了 .column 属性 flex: 1。来自规范

w3

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

要防止 column 及其内容扩展，您需要给它一个 max-width 值。

我还建议从 .column 中删除 margin-right。相反，设置列宽并在容器上使用 justify-content 属性。

fiddle

.container {
  width: calc(100% - 34px);
  height: 185px;
  margin-left: 17px;
  margin-top: 17px;
  display: flex;
  justify-content: space-between;
}

.column {
  flex: 1;
  height: 186px;
  max-width: 19%;
}

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

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

防止 contenteditable（在 flexed div 中）扩展

Prevent contenteditable (in flexed div) from expanding

css

overflow

contenteditable

flexbox