Prevent contenteditable (in flexed div) from expanding [duplicate] - css

Question

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
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.

Answer 1

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>