CSS Flexbox - Truncated Text in CSS Grid (Firefox only)

Question

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?

You just need to add `min-width: 0` to `.analysisPanel` [jsfiddle demo](https://jsfiddle.net/zt36scbn/2/). — Michael Benjamin, Nov 07 '17 at 23:48

G-Cyrillus · Accepted Answer · 2017-11-07T23:38:32.450

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>

With a max-width set, the text will only truncate to a fixed position (2ems before the end of the text in this case). How could this be extended so that the text will truncate all of the characters, if the container is collapsed further? — Kyle, Nov 07 '17 at 22:53
@Kyle then the max-width needs to be set on `.analysisPanel` , so it shrinks from there ;) in FF (snippet updated to test if i understood :) ) — G-Cyrillus, Nov 07 '17 at 23:38

CSS Flexbox - Truncated Text in CSS Grid (Firefox only)

1 Answers1

Linked