text-overflow：省略号不在嵌套的Flex容器中工作

Question

我有一个由按钮旁边的文本组成的组件。如果没有足够的空间，文本必须缩小并切断。像这样：

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

重要提示：要查看它是否有效，请最大化代码段并缩小浏览器窗口，以便查看文本截断。

它可以正常工作。

在另一个弹性容器内

当我尝试将此组件放在另一个Flex容器中时出现问题。

我的页面包含一个固定的侧面区域，右侧的剩余部分则调整到剩余的空间。我的组件必须适合第二部分，所以我把它放在那里：

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

.main {
  display: flex;
}

.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}

.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

在第二种情况下，文本不会缩小。我使用的是Chrome，但在其他浏览器中看起来也是一个问题。

Answer 1

解决方案

将min-width: 0添加到外部Flex项目（.content / demo）

或

将overflow: hidden添加到外部Flex项目（.content / demo）

说明

弹性容器的初始设置为弹性项目min-width: auto。

这意味着灵活项目不能小于其内容的大小。

在原始代码中，由于overflow: hidden，文本框（弹性项）变小。

如果没有这个规则，您将拥有与第二个示例相同的行为。

Demo: When overflow: hidden is removed, first example behaves like second example

在代码的第二个版本中，主要的Flex项目为.side和.content。

默认情况下，.content不能短于其内容（不论是flex-shrink）...在您使用min-width: auto覆盖min-width: 0之前，或者像第一个示例一样，申请overflow: hidden。

来自规范：

  

4.5. Implied Minimum Size of Flex Items

     

为flex项提供更合理的默认最小大小，这个   规范引入了一个新的auto值作为初始值   CSS 2.1中定义的min-width和min-height属性... read more

有关其他示例，请参阅：Why doesn't flex item shrink past content size?

Answer 2

使用width属性来处理overflow

注意：宽度应为 px

＆＃13;

＆＃13;

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  display: flex;
}
.main {
  display: flex;
}
.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}
.main .content {
  flex: 1 1 auto;
}

＆＃13;

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when ndgsdgeeded.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;