Can you take a look at my drawing?
Here is the scenario I'm trying to achieve:
(1) I have a flexbox with two columns. If one box is bigger than half the width and there is enough space for both boxes, they should remain unchanged (or stretch proportionally).
(3) If one box is bigger than half the width but both boxes don't fit, then only shrink the larger box.
(4) If both boxes are bigger than half the width, both should shrink proportionally.
For a visual example, please visit: http://jsbin.com/upArEVI/3/edit
Here is the graphical representation based on the code example above:
And here is the code snippet:
body{
width: 100%;
padding:0;
margin:0;
background: white;
}
.line{
display: flex;
height: 50px;
border-top:1px solid lightgray;
border-bottom:1px solid lightgray;
}
.left, .right{
flex: 0 1 auto;
overflow:hidden;
text-overflow: ellipsis;
background: rgba(0,200,0,0.1);
white-space: nowrap;
border-right:2px solid black;
}
.right{
text-align: right;
flex: 1 1 auto;
background: rgba(0,0,200,0.1);
}
.middle{
position: absolute;
top:0;
width:50%;
height: 100%;
border-right:2px dotted red;
}
Displayed with HTML:
<div class="line">
<div class="left">
something 2 something 3
</div>
<div class="right">
something 5
</div>
</div>