Ellipsis in flexbox container [duplicate]

This was eventually tracked down to recent changes in Firefox Nightly. Long story short, setting min-width: 0 on the .column selector will make it work as expected.

A more comprehensive answer can be found here. Of note:

“Basically: flex items will refuse to shrink below their minimum intrinsic width, unless you explicitly specify “min-width” or “width” or “max-width” on them.”

The working solution:

.container {
  width: 300px;
  background: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  /* This will make it work in Firefox >= 35.0a1 */
  min-width: 0;
  flex-basis: 50%;
}

.column p {
  background: gold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="container">
  <div class="row">
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly become the care of another crew. To them and their posterity will we commit our future. They will continue the voyages we have begun and journey to all the undiscovered countries boldly going where no man, where no one has gone before.</p>
    </div>
  </div>
</div>

Leave a Comment