Why does text-overflow not work inside nested flex-box?

Question

My overflow text has two parents, each have display: flex. The overflow with ellipsis seems only to work if on parent is removed. Otherwise the text keeps it width and determines the parent width. You can test it in the fiddle by reducing the browser width. What is wrong?

jsfiddle

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: lightgrey;
  max-width: 600px;
}

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 20px;
}

<div class="wrap">
  <div class="wrap">
    <p>
      1) looooooooooooooooooooooooooooooooooooong text
    </p>
  </div>
</div>

Answer 1

A very common problem when we try to make CSS shortcut for text is: when we try to combine flex-box layout (display: flex;) with text-overflow: ellipsis;.

The solution for this problem is to use min-width: 0; for parent element that we want to shortcut text. So you can simply use min-width: 0px; in your parent div. like

.wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: lightgrey;
  min-width: 0px;  // use 0px in min width
}

try this your problem will be solved.

Answer 2

You have to define an explicit with (in this case 100%) on the flex containers.

It will work with this code:

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: lightgrey;
  max-width: 600px;
  width: 100%;
}

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 20px;
  display: block;
  width: 100%;
}

<div class="wrap">
  <div class="wrap">
    <p>
      1) looooooooooooooooooooooooooooooooooooong text
    </p>
  </div>
</div>