Почему не обрезается длинный текст внутри GRID, вместо этого GRID-элемент выходи за границы родителя?

Question

[djok2142]

Подскажите пожалуйста, как при использовании grid обрезать длинную строку внутри ячейки.
К строке применил код:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Пытаюсь получить такой результат:

Но в итоге получаю это:

grid элемент выходи за границы родительского элемента.

Прикрепляю пример кода на jsfiddle

Comments

[Ankhena]

Задайте grid для div3

[djok2142]

Ankhena, Благодарю, работает как нужно. А случайно не подскажите где можно почитать, почему именно display: grid необходимо использовать в подобной ситуации.

Answer 1

[Андрей]

Попробуйте это.

.div3 {
  grid-area: 2 / 1 / 3 / 3;
  background: yellow;
  display: grid;
}