Элемент 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/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 1
        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
    <li role="separator" class="mdc-list-divider"></li>
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 2
        <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
  </ul>
</div>

Источник

1 ответ

Решение

Иногда вам нужно просмотреть все гибкие элементы (вверх и вниз по структуре 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/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
  <ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
    <li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 1
        <span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
    <li role="separator" class="mdc-list-divider"></li>
    <li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
      <img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">

      <span class="mdc-list-item__text">
        Test Item 2
        <span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
      </span>

      <div class="mdc-list-item__end-detail">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
          X
        </i>
      </div>
      <div class="mdc-list-item__end-detail" style="margin-left: 64px;">
        <i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
          Y
        </i>
      </div>
    </li>
  </ul>
</div>

Источник
Другие вопросы по тегам