'Why does text-overflow not work inside nested flex-box? [duplicate]

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>
htmlcss


Solution 1:[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.

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 YourBrainEatsYou

Related Questions