Prevent contenteditable (in flexed div) from expanding

Question

I'm starting with css flex and I have a hard time with using a contenteditable that I can't prevent from expanding horizontally when the text is too long. I tried on: - Chrome - Firefox - Opera - Safari

They all make the divs expand but Safari, who does what I expect.

Here is the 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>

Here is the 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;
}

Of course, the HTML could be less complicated for such a result (divs into divs into divs) but keep in mind that I cleaned the code as much as possible in order to present it to you as the design asks for this. However, I decided to show the relevant part of structure as it might be important to fix the problem.

Here is a JSFiddle of the result:

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

If you type a text into one of these boxes, when the text is long enough, it will expand its containing div and change the overall layout of the page. (if it doesn't do that on your browser, then your browser is one of the happy few).

Basically, what I need is to get something like a hidden overflow on all browsers of text written so that the overall design won't break. I just can't get it to work.

Thanks for your help.

can you not just add a width to your column? https://jsfiddle.net/b4er9tLg/3/ — Pete, Nov 06 '17 at 14:30
As I said, I'm learning flex and for what I knew so far, I thought that the display:flex on the parent was enough to dispatch the appropriate width among all the columns. What is weird to me is the fact that, whatever the width of the container, a hidden overlfow is not enough to prevent him from groing. — Bachir Messaouri, Nov 06 '17 at 14:46
By simply add `min-width: 0;` to your `.column` rule fix that, and the reason can be found in the dupe link. And here is an updated fiddle: https://jsfiddle.net/b4er9tLg/4/ — Asons, Nov 06 '17 at 15:30

sol · Accepted Answer · 2017-11-06T14:36:25.017

You have given .column the property flex: 1. From the spec

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.

To prevent column and it's contents from expanding you need to give it a max-width value.

I would also suggesting removing margin-right from .column. Instead, set the column width and use the justify-content property on the container.

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>

@BachirMessaouri That is absolute not the real reason, the dupe explain what is going on here. — Asons, Nov 06 '17 at 15:32
One question though: how do you go from a margin-right of 1.75% (which makes a total empty space of 7%), to a max-width of 95%? Is it just that you arounded it more or less (19% instead of 18.6%) or is it something I should take into account that makes that difference? — Bachir Messaouri, Nov 07 '17 at 04:30
@BachirMessaouri As I commented before, the given answer is not the proper way, nor the reason you have the issue, just check this sample, [https://jsfiddle.net/b4er9tLg/4/](https://jsfiddle.net/b4er9tLg/4/), made a comment in CSS what I changed, and the dupe link explain why this happens. — Asons, Nov 08 '17 at 17:37
@BachirMessaouri Additionally, using margin with percent is not recommended, as it can give different result on different browsers, in this case you could use `vw`, [https://jsfiddle.net/b4er9tLg/5/](https://jsfiddle.net/b4er9tLg/5/). — Asons, Nov 08 '17 at 17:39

Prevent contenteditable (in flexed div) from expanding

1 Answers1