Многоточие CSS для переполнения текста не работает в Grid / Flex

Проблема, похоже, в том, что на .gridItem есть стиль display: flex;, если его снять, он работает. Если вам нужно иметь display: flex; на элементах вашей сетки, то эта статья может быть полезной: https://css-tricks.com/flexbox-truncated-text/

Чтобы заставить работать многоточие, вам нужно нацелить текст, а не контейнер.

В вашем коде вы устанавливаете многоточие на гибком контейнере (элементе сетки):

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

Дочерним элементом контейнера является текст. За исключением того, что вы не можете применить какой-либо CSS непосредственно к тексту, потому что это анонимный гибкий элемент (т.е. гибкий элемент без определенных тегов вокруг него). Поэтому вам нужно обернуть текст в элемент, а затем применить код с многоточием.

Из этого:

<div class = "gridItem">Why no ellipsis on this div?</div>

К этому:

<div class = "gridItem"><span>Why no ellipsis on this div?</span></div>

Тогда вам придется бороться с алгоритм минимального размера гибких элементов. Это правило, установленное по умолчанию, гласит, что гибкий элемент не может быть меньше его содержимого по главной оси. Решение этой проблемы - установить для гибкого элемента значение min-width: 0, которое переопределяет значение по умолчанию min-width: auto.

.grid {
  display: grid;
  margin: auto;
  width: 90%;
  grid-template-columns: 2fr 15fr;
}

.gridItem {
  display: flex;
  align-items: center;
  height: calc(50px + 2vw);
  border: 1px solid red;
  min-width: 0;
}

.gridItem > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class = "grid">
  <div class = "gridItem"><span>Why no ellipsis on this div?</span></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
  <div class = "gridItem"></div>
</div>

пересмотренный код

Эти сообщения содержат более подробные объяснения:

• понимание алгоритма гибкого минимального размера
• понимать анонимные гибкие элементы