ellipsis does not work (flexbox)

Question

I'm trying to put ellipsis for text overflow:

parent:

.grid-row {
  display: flex;
}

child:

.grid-cell {
  display: flex;
  flex-grow: 3;
  flex-basis: 0;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-cell:first-child {
  flex-grow: 1;
  justify-content: center;
}

And, well the overflow is hidden, but without any ellipsis.

Answer 1

For text overflow to work you need a set width - set a width to your grid-row.

Also remove the display: flex from the grid-cell - see demo below:

.grid-row {
  display: flex;
  width: 250px;
}
.grid-cell {
  /*display: flex;*/
  flex-grow: 3;
  flex-basis: 0;
  /*align-items: center;*/
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-cell:first-child {
  flex-grow: 1;
  justify-content: center;
}

<div class="grid-row">
  <div class="grid-cell">insert text here</div>
  <div class="grid-cell">some text</div>
  <div class="grid-cell">some more text here</div>
</div>