Question

我在使用弹性框时遇到了一些问题，并且随着文本/内容的增长，它们会越过容器，并且只有在达到容器的指定最大宽度时才应用省略号。

这不太理想，因为父容器可缩小到x像素，文本只是强制它增长到我不想要的最大宽度。

看this fiddle，如果我从overflow: hidden删除child1并将其应用于main，则该文字将被删除。

如果我从overflow: hidden删除main并将其应用于child1，则可以实现我想要的行为。

如果我从它们中删除overflow: hidden，容器和文本就会永远存在。

我只是想知道为什么将overflow: hidden应用于child1会产生所需的行为。文本不应该像main上的溢出一样切断吗？

.main {
  display: flex;
  border: 1px solid black;
  height: 200px;
  padding: 10px;
  //overflow: hidden;

}
.child1 {
  display: flex;
  border: 1px solid red;
  height: 100px;
  overflow: hidden;
}
.child2 {
  flex: 1 1 auto;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="main">
  <div class="child1">
    <div class="child2">
      Lots of words Lots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of
    </div>
  </div>
</div>

Answer 1

这是因为Flexbox为min-width和min-height引入了新的初始值：auto。

当您拥有初始overflow: visible时，min-width: auto会计算Flex项目内容的宽度（请参阅exact rules）。

但是当您使用其他overflow时，min-width: auto将计算为0。

在您的情况下，.child1是一个弹性项目。因此，默认情况下，它至少与其内容一样宽。它甚至可以溢出其容器，在这种情况下.main的{{1}}将被考虑在内。

但是如果你想阻止overflow增长太多，你可以

正如您所观察到的那样，使用非.main visible。这会使overflow计算到min-width: auto。

.main {
  display: flex;
  border: 1px solid black;
  height: 200px;
  padding: 10px;
}
.child1 {
  overflow: hidden;
  display: flex;
  border: 1px solid red;
  height: 100px;
}
.child2 {
  flex: 1 1 auto;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

不要将<div class="main"> <div class="child1"> <div class="child2"> Lots of words Lots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of </div> </div> </div>设为弹性项目。这会使.child计算到min-width: auto。
```
0
```
```
.main {
  border: 1px solid black;
  height: 200px;
  padding: 10px;
}
.child1 {
  display: flex;
  border: 1px solid red;
  height: 100px;
}
.child2 {
  flex: 1 1 auto;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
```
手动设置<div class="main"> <div class="child1"> <div class="child2"> Lots of words Lots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of </div> </div> </div>
```
min-width: 0
```
```
.main {
  display: flex;
  border: 1px solid black;
  height: 200px;
  padding: 10px;
}
.child1 {
  min-width: 0;
  display: flex;
  border: 1px solid red;
  height: 100px;
}
.child2 {
  flex: 1 1 auto;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
```

Answer 2

当您将overflow: hidden应用于.main时，此剪辑.child1 ，而不是.child2（带文字的div）。

所以.child2溢出.main，因为overflow: hidden（demo）上没有.child1。

为了更好地理解这一点，请在overflow: scroll而不是.main上尝试hidden。

在overflow: hidden上使用.child1时，此剪辑.child2。

现在.child2的宽度有限，省略号按预期工作（demo）。

同样，overflow: scroll上的.main可以更清楚地说明这一点。

另请注意，overflow属性仅适用于块容器的内容。

来自规范：

11.1.1 Overflow: the overflow property

此属性指定块容器元素的内容   当它溢出元素的框时被剪裁。它影响了   剪切除了任何后代之外的所有元素的内容   元素（及其各自的内容和后代）   包含块是视口或元素的祖先。

了解溢出的行为：隐藏在flexbox容器中

2 个答案: