Подтвердить что ты не робот

Элемент 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/

ОТВЕТЫ

Ответ 1

Иногда вам нужно посмотреть все элементы flex (вверх и вниз по структуре HTML) и проверить, требуется ли им переопределение overflow/min-width.

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

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

/* RULES ADDED */
.mdc-list {
   min-width: 0;
}
.mdc-list-item__text {
  overflow: hidden;
}
.mdc-list-item__text__secondary {
  text-overflow: ellipsis;
  overflow: hidden;
}
<script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script>
<link href="#" onclick="location.href='https://unpkg.com/
/*  */