Элемент Flex не уменьшается меньше его содержимого

У меня есть список элементов, которые я показываю для пользователя вместе со значком и двумя кнопками. Пока что так хорошо, но я хочу, чтобы этот список масштабировался на мобильные устройства и при необходимости сокращался.

Когда текст внутри списка слишком длинный, он предотвращает сжатие страницы и заставляет горизонтальную полосу прокрутки отображаться. Я пытаюсь добиться того, что длинный текст описания сокращается, показывая 3 точки в конце (многоточие).

Элемент контейнера отображается как flex, а текстовый контейнер имеет flex-shrink 1, но он все еще отказывается сжиматься и переполняться.

Может ли кто-нибудь вести меня, что я здесь делаю неправильно? Почему .mdc-list-item отказывается сокращаться? Есть ли способ заставить его сжиматься при необходимости только с помощью CSS?

.mdc-list-item {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdc-list {
  display: flex;
  flex-direction: column;
}

<script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script>
<link href="#" onclick="location.href='https://unpkg.com/
/*  */