Flex项目的缩小程度不小于其内容

Question

我有一个我为用户显示的元素列表以及一个Icon和两个按钮.到目前为止这么好,但我希望这个列表可以扩展到移动设备并在必要时缩小.

当列表中的文本太长时,它会阻止页面缩小并强制显示水平滚动条.我想要实现的是长描述文本缩小,最后显示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>

Answer 1

有时您需要查看所有 flex项(HTML结构的上下),并检查它们是否需要overflow/ min-widthoverride.

在这种情况下,仍存在默认的较高级别的弹性项目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>