Don’t give that column flex:1 as it will expand to take up as much room as is permitted.
In fact, don’t give it any flex value at all and it will default to width:auto.
.flex {
display: flex;
}
.inside {
border: 1px solid #000;
}
.inside-right {
flex: 1;
background:#c0ffee;
}<div class="flex">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">RIght</div>
</div>
<div class="flex">
<div class="inside inside-left">Left Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>
<div class="flex">
<div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>EDIT: It seems the intention was to have every “left” element be the same size.
This is not possible with flexbox but CSS Tables can achieve this.
.row {
display: table-row;
}
.inside {
display: table-cell;
border: 1px solid grey;
}
.inside-left {
background: lightgreen;
}<div class="row">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">RIght</div>
</div>
<div class="row">
<div class="inside inside-left">Left Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>
<div class="row">
<div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>