CSS Flexbox - Truncated Text in CSS Grid (Firefox only) [duplicate] - css

Question

This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 5 years ago.
I can easily render a flexbox with some text and a button, where the text will shrink and truncate with an ellipsis if its container shrinks:
.titleBarCtr {
align-items: center;
display: flex;
}
.titleBar {
color: white;
background-color: green;
flex: 1;
height: 44px;
line-height: 44px;
margin: 0;
padding-left: 5px;
text-align: left;
}
.titleBarCtr .icon {
background-color: green;
border-left: 1px solid white;
color: white;
cursor: pointer;
font-size: 1.17em; /*Matches h3 elems*/
line-height: 44px;
height: 44px;
padding: 0 15px;
text-align: center;
text-decoration: none;
}
.truncatedText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/>
<div class="titleBarCtr">
<h3 class="titleBar truncatedText">
Testing a long string that should be truncated
</h3>
<a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
</div>
However, if I attempt to render this same flexbox inside of a grid, the text will no longer truncate in Firefox (56.0.2 using Ubuntu 16.04), though this seems to work ok in Chrome still:
.root {
display: grid;
grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right];
grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom];
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
position: absolute;
}
.analysisPanel {
box-shadow: 0 -2px 1px -1px rgba(0,0,0,0.2);
display: flex;
flex-flow: column;
grid-column-start: main;
grid-column-end: right;
grid-row-start: analysisPanel;
grid-row-end: bottom;
}
.titleBarCtr {
align-items: center;
display: flex;
}
.titleBar {
color: white;
background-color: green;
flex: 1;
height: 44px;
line-height: 44px;
margin: 0;
padding-left: 5px;
text-align: left;
}
.titleBarCtr .icon {
background-color: green;
border-left: 1px solid white;
color: white;
cursor: pointer;
font-size: 1.17em; /*Matches h3 elems*/
line-height: 44px;
height: 44px;
padding: 0 15px;
text-align: center;
text-decoration: none;
}
.truncatedText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/>
<div class="root">
<div class="analysisPanel">
<div class="titleBarCtr">
<h3 class="titleBar truncatedText">
Testing a long string that should be truncated
</h3>
<a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
</div>
</div>
</div>
I've tried setting min-width: 0 on the titleBar element and playing with flex-basis with no luck.
Any suggestions?

Answer 1

Firefox seems to need a max-width set.
.analysisPanel {
max-width:100%;/* update */
}
.root {
display: grid;
grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right];
grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom];
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
position: absolute;
}
.analysisPanel {
max-width:100%;/* update */
box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.2);
display: flex;
flex-flow: column;
grid-column-start: main;
grid-column-end: right;
grid-row-start: analysisPanel;
grid-row-end: bottom;
}
.titleBarCtr {
align-items: center;
display: flex;
}
.titleBar {
color: white;
background-color: green;
flex: 1;
height: 44px;
line-height: 44px;
margin: 0;
padding-left: 5px;
text-align: left;
}
.titleBarCtr .icon {
background-color: green;
border-left: 1px solid white;
color: white;
cursor: pointer;
font-size: 1.17em;
/*Matches h3 elems*/
line-height: 44px;
height: 44px;
padding: 0 15px;
text-align: center;
text-decoration: none;
}
.truncatedText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="root">
<div class="analysisPanel">
<div class="titleBarCtr">
<h3 class="titleBar truncatedText">
Testing a long string that should be truncated
</h3>
<a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a>
</div>
</div>
</div>