flex布局下使用文字超出省略会造成外部容器被撑开的问题？

Question

问题描述

经常会遇到如此布局的文章列表页面设计，左侧图片固定大小，右侧按照浏览器宽度撑满剩余区域。
但在给文章标题增加文字超出省略时会遇到把外部容器撑开的情况。

问题出现的环境背景及自己尝试过哪些方法

在不增加文字超出隐藏时不会遇到撑开外部容器的问题，但是只要添加了文字超出隐藏的CSS样式，就与复现该问题。
因为 .text 的内容太多，致使 .container 容器被撑开了，并且 .container 的宽度变大使 .wrap 的宽度也增大了，并不是按照设想的 100vw。同时文本标题超出省略的样式也没有应用到。

相关代码

在线复现Demo

你期待的结果是什么？实际看到的错误信息又是什么？

应该如何正确的实现自适应宽度和文字超出隐藏。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

给 .text 添加 min-width:0;就可以了。

Answer 2

根据我的经验,在这个位置加个min-width: 0;就好了

Answer 3

修改.text宽度

 .list-item
        width 100%
        background #f2f2f2
        padding 10px
        border-radius 10px
        display flex
        align-items center
        box-sizing border-box
        .img
          width 150px
          height @width
          background #99d9ea
          border-radius 10px
          flex 0 0 auto
        .text
          width calc(100% - 150px - 20px)
          height 150px
          padding-left 10px
          padding-right 10px
          h2,p
            line-height 1.6
            word-wrap normal
            white-space nowrap
            text-overflow ellipsis
            overflow hidden
        .arrow
          width 20px
          height @width
          border-width 4px 4px 0 0
          border-style solid
          border-color #444
          transform rotate(45deg)
          flex 0 0 auto

Answer 4

我的习惯是加 overflow: hidden。 height 可以考虑改成 min-height

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

.text {
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

使用 flex-shrink 属性就行