contenteditable（flexed div内）が展開されないようにする

Question

私はcss flexから始めています。テキストが長すぎると横方向に拡大するのを防ぐことができないcontenteditableを使用するのは苦労します。 私が試着： - クローム - Firefoxの - オペラ - サファリ

彼らはすべてのdivが展開するが、私は何を期待しサファリ、作ります。ここで

は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は、このような結果のために（divの中のdiv内のdiv）それほど複雑ではなく保つことができます私ができる限りコードをクリーンにして、デザインが要求するようにそれをあなたに提示することを念頭に置いてください。 しかし、問題を解決することが重要な場合があるので、構造の関連部分を示すことにしました。ここで

は、結果のJSFiddleです：

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

あなたはこれらのボックスのいずれかにテキストを入力するとテキストが十分に長い場合、それはそれを含むdiv要素を拡大し、全体的なレイアウトを変更しますページの （ブラウザでそれを行っていない場合、あなたのブラウザは幸せな数です）。

基本的に、私が必要とするのは、全体のデザインが壊れないように、書き込まれたテキストのすべてのブラウザで隠れたオーバーフローのようなものを得ることです。 私はそれを動作させることができません。

ありがとうございました。

Answer 1

.columnにはflex: 1という特典が付与されています。スペックから

w3

フレックス：<正番号屈曲に相当>
：> 1 0フレックスアイテムが柔軟になり、ゼロにフレックス基準を設定<正の数、 コンテナ内の空き領域の指定された割合を受信する項目が発生します。フレックスコンテナ内のすべてのアイテムがこのパターンを使用する場合、サイズは指定されたフレックスファクタに比例します。

columnとその内容が拡大するのを防ぐには、max-widthの値を指定する必要があります。

margin-rightを.columnから削除することもお勧めします。代わりに、列の幅を設定し、コンテナの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>