I have a flex-container, inside of that container I have 2 child elements. Both child elements are variable in length (the content will names and telephone numbers).
What I want is that the right most child container impersonation-container always stays the same size. And the elements in the child elememt next to it, phone-control-container, should ellipse so that the impersonation-container doesn't get pushed out of the parent container.
I can fix this by setting the width of the phone-control-container to be 100% - the width of the impersonation-container. But I was hoping to do this with pure CSS. Any suggestions?
I've created a plunkr with the problem and the solution with the calculated width:
https://plnkr.co/edit/5gvk7fIHuMIYhbja1qov?p=preview
.grid-holder {
display: grid;
grid-template-columns: 100%
}
.grid-holder .conversation-container {
display: flex;
width: calc(100% - 20px);
border: 1px solid black;
background-color: green;
padding: 10px;
}
.grid-holder .conversation-container .conversation-holder {
flex: 0 1 auto;
min-width: 0;
background-color: yellow;
padding: 5px;
border: 1px solid white;
margin-right: 5px;
display: flex;
}
.grid-holder .conversation-container .conversation-holder span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.grid-holder .conversation-container .impersonation-container {
flex: 1!important;
margin-left: auto;
background-color: yellow;
padding: 5px;
border: 1px solid white;
margin-right: 5px;
}
.grid-holder .conversation-container .impersonation-container empy {
display: flex;
}
.grid-holder .conversation-container .phone-control-container {
width: 100%;
}
.grid-holder .conversation-container .phone-control-container empty {
width: 100%;
}
.grid-holder .conversation-container .phone-control-container empty .double-container {
display: flex;
}
.grid-holder1 {
display: grid;
grid-template-columns: 100%
}
.grid-holder1 .conversation-container {
display: flex;
width: calc(100% - 20px);
border: 1px solid black;
background-color: green;
padding: 10px;
}
.grid-holder1 .conversation-container .conversation-holder {
flex: 0 1 auto;
min-width: 0;
background-color: yellow;
padding: 5px;
border: 1px solid white;
margin-right: 5px;
display: flex;
}
.grid-holder1 .conversation-container .conversation-holder span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.grid-holder1 .conversation-container .impersonation-container {
flex: 1!important;
margin-left: auto;
background-color: yellow;
padding: 5px;
border: 1px solid white;
margin-right: 5px;
}
.grid-holder1 .conversation-container .impersonation-container empy {
display: flex;
}
.grid-holder1 .conversation-container .phone-control-container {
width: calc(100% - 160px);
}
.grid-holder1 .conversation-container .phone-control-container empty {
width: 100%;
}
.grid-holder1 .conversation-container .phone-control-container empty .double-container {
display: flex;
}<h1>Scalable content using flex, example 1, issue with shrinking the DOM</h1>
<div class="grid-holder">
<div class="conversation-container">
<div class="phone-control-container">
<empty>
<div class="double-container">
<div class="conversation-holder">
<p>X</p>
<span class="name">Namefrom Someone</span>
<span class="number">555666444213321</span>
<p>X</p>
</div>
<p>X</p>
<div class="conversation-holder">
<span class="name">Namefromasdasd eone</span>
<span class="number">555666444123123</span>
</div>
</div>
</empty>
</div>
<div class="impersonation-container">
<empy>
<span>something</span>
<span>button</span>
<span>button</span>
</empy>
</div>
</div>
</div>
<h1>Scalable content using flex, example 2, fixed DOM shrinking issue but using hard coded values in the width</h1>
<div class="grid-holder1">
<div class="conversation-container">
<div class="phone-control-container">
<empty>
<div class="double-container">
<div class="conversation-holder">
<p>X</p>
<span class="name">Namefrom Someone</span>
<span class="number">555666444213321</span>
<p>X</p>
</div>
<p>X</p>
<div class="conversation-holder">
<span class="name">Namefromasdasd eone</span>
<span class="number">555666444123123</span>
</div>
</div>
</empty>
</div>
<div class="impersonation-container">
<empy>
<span>something</span>
<span>button</span>
<span>button</span>
</empy>
</div>
</div>
</div>You have to shrink the view that has the template. When the content doesn't fit the container anymore you will see that in the first example the most right element is pushed outside of the container.
