1

Why isn't text overflow hidden inside two nested flexbox divs? It works when it is inside one div.

In particular: why is the inner div larger than the outer div?

Browser: Chrome 52.0.2743.60

Here is a minimal code example:

<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>
user6661680
  • 11
  • 2
  • Clarification: there are some workarounds to this, but I'd like know _why_ it happens. Why does the inner box become larger than the outer one? – user6661680 Aug 01 '16 at 06:03

1 Answers1

0

I believe it is something to do with your outer flex having a width, but the inner one does not, so this confuses the browser as to where the overflow is located. You can fix this by applying a width to your inner or text div like so:

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

Another alternative is to move the overflow: hidden to your outer flex.

Zenny
  • 181
  • 8