Give an HTML element a static width, so it cannot be shrinked - html

Question

I have two p HTML elements, the second one must be shown completely. If the container cannot handle both elements, then any shrinks must be applied on the first element only.
The two HTML elements are inline. For example, Let us assume that the first HTML element represented by W and the second one is Y. "| |" represents the outer container.
|WWWWWWWWWWWW YYYY|, here the container can contain both HTML elements, so there is no problem
|WWWWWWW... YYYY|, here the container cannot contain both HTML elements, so the shrink is applied only on the first element.
Please note that the second element has a background color, so its width must be exactly match the text that it contains. For example, if you give him a 25% width and the text is only 11%, then there will be 14% extra color, which is a bad design.
I tried to use flex as the following:
First element: flex: 1 2 auto; where it shrinks more than the second element.
Second element: flex: 1 1 auto; where it shrinks normally
However, this solution have failed.

Answer 1

I believe this is what you were looking for:
HTML
<div id="div1">
<p>ABCDEFGHI</p>
<p>XYZ</p>
</div>
<div id="div2">
<p>ABCDEFGHI</p>
<p>XYZ</p>
</div>
CSS
div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
#div1 {
width: 100px;
}
#div2 {
width: 200px;
}
p:nth-child(1){
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p:nth-child(2){
width: 25%;
}

Answer 2

try this,
HTML
<div id="outer-container">
<span class="shrink">
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
</span>
<span class="no-shrink">
<span class="content-width">YYYYYYY</span>
</span>
</div>
CSS
body,html{
padding:0px;
margin:0px;
}
* {
box-sizing:border-box;
}
#outer-container{
display:table;
width:100%;
background:#ddd;
margin:0px;
padding:0px;
}
.shrink, .no-shrink{
display:table-cell;
vertical-align:top;
}
.shrink{
max-width:100px; /* initial value, will be overwite by js */
min-width:100px;
overflow:hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no-shrink{
background:red;
color:#fff;
}
.content-width{
background:green;
display:inline-block;
max-width:200px; /* to limit the second element width growing */
word-break:break-all; /* to limit the second element width growing */
}
JS (JQuery)
$(document).ready(function(){
$(".content-width").css('min-width', $(".content-width").width());
$(".no-shrink").width($('.content-width').width());
$(".shrink").css('max-width', $(".outer-container").innerWidth() - $('.content-width').width());
$(window).resize(function(){
$(".content-width").css('min-width', $(".content-width").width());
$(".no-shrink").width($('.content-width').width());
$(".shrink").css('max-width', $(".outer-container").innerWidth() - $('.content-width').width());
});
});
Fiddle
https://jsfiddle.net/guruling/pkhf8any/