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

最佳答案

有时您需要查看所有 flex 元素(在 HTML 结构中向上和向下)，并检查它们是否需要 overflow/min-宽度覆盖。

在这种情况下，较高级别的 flex 元素仍然默认为 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>

关于html - Flex 元素不会收缩小于其内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47456839/

上一篇：javascript - 需要巴基斯坦 CNIC 和移动格式屏蔽

下一篇：javascript - 函数 'onclick' 只工作一次

相关文章：

jquery - 无法对齐插入按钮

html - 如何在 HTML 元素上一致地设置背景图像

javascript - 使用按钮显示一些文本 - JavaScript

javascript - 使用 jquery/javascript 将带有下拉列表的 html 表导出到 CSV 文件

html - 是否有可能有一个 :after pseudo element on a button?

javascript - 信息注释在图标顶部的 css 定位

html - 在 html 表中显示来自 struts2 列表的值

html - 不同方向的内部元素的 margin-right 不能正常工作

css - flex-box 中的行换行不在 Safari 中换行

css - Div 垂直扩展，但如果它已填满容器则可滚动