I have two divs side by side.
Both divs must remain on the same line (not one under the other), despite the length of the contents of each div.
So I used the css text-overflow: ellipsis on both divs (cobbled from a different jsfiddle). This does work, except for one small issue.
How can I add a min-width to the 2nd div class : .container > div:last-child (this is the div with the yellow background)?
I have tried to add a min-width: 150px; to this css class, but this kills the text-overflow: ellipsis; effect.
I have attached a jsfiddle as an example of what I am trying to achieve.
.container {
display: -webkit-flex;
}
.container>div:first-child {
white-space: nowrap;
-webkit-order: 1;
-webkit-flex: 1;
background: aqua;
-webkit-flex: 0 1 auto;
/*important*/
text-overflow: ellipsis;
overflow: hidden;
width: auto;
}
.container > div:last-child {
white-space: nowrap;
-webkit-flex: 1;
-webkit-order: 2;
background: yellow;
-webkit-flex: 1 0 auto;
/*important*/
text-overflow: ellipsis;
overflow: hidden;
width: 150px;
}
.container > div:first-child:hover {
white-space: normal;
}
.container > div:last-child:hover {
white-space: normal;
}<div class="container">
<div class="not_important1">
employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer
</div>
<div class="not_important2">
url url url url url url url url url url url url url url url url url url url url url url url url url
</div>
</div>I will appreciate any suggestions.