Question

为什么文本溢出隐藏在两个嵌套的flexbox div中？当它在一个div内时它起作用。

特别是：为什么内部div大于外部div？

浏览器：Chrome 52.0.2743.60

这是一个最小的代码示例：

<style>
.outer {
  display: flex;

  width: 500px;
  border: 2px solid red;
}
.inner {
  display: flex;

  border: 2px solid blue;
}
.text {
  overflow: hidden;
  white-space: nowrap;
}
</style>

<div class="outer">
  <div class="inner">
    <div class="text">
      My overflow should be hidden but it's not aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
  </div>
</div>

Answer 1

我认为这与你的外部flex有宽度有关，但内部有没有，所以这会让浏览器对溢出位置的位置感到困惑。您可以通过将宽度应用于内部或文本div来解决此问题，如下所示：

.inner {
  display: flex;
  width: 100%; /* or 500px */
}

另一种方法是将overflow: hidden移动到外部弯曲。

溢出未隐藏在嵌套的flexbox div中

1 个答案: