Flex item is not shrinking smaller than its content [duplicate]

Question

I have a list of elements that I'm showing for the user together with an Icon and two Buttons. So far so good, but I want this list to scale to mobile devices and shrink when necessary.

When the text inside the list is too long it prevents the page to shrink and forces a horizontal scrollbar to show. What I'm trying to achieve is that the long description text gets shrunk, showing the 3 dots at the end (ellipsis).

The container element is displayed as flex, and the text container has flex-shrink 1, but it still refuses to shrink and overflow.

Can anybody guide me what I'm doing wrong here? Why is .mdc-list-item refusing to shrink? Is there any way to force it to shrink when necessary with just 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>

Dvinsk

Answer 1

Sometimes you need to look at all flex items (up and down the HTML structure), and check to see if they need the overflow / min-width override.

In this case, there are flex items at higher levels that still default to min-width: auto, preventing the reduction in size.

.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>

Unchaste

I really appreciate that italics all. It made me check each one and found it. – Pricking

what is the solution if we don't want overlfow but the text to break the word. – Collis