2

To let a flex-child have truncated text with ellipsis one can give the parent an min-with:0. In my project the child is nested in almost 10 different flex containers. Do I need to give all parents a min-width:0 or is ther a better work around?

sandbox

body {
  width: 400px;
}

.flex-parent {
  display: flex;
  padding: 10px;
  border: solid;
}

.flex-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.flex-parent-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="flex-parent-parent-parent">
  <div class="flex-parent-parent">
    <div class="flex-parent">
      <div class="flex-child long-and-truncated">
        1. This is a long string that is OK to truncate please and thank you
      </div>
    </div>
  </div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
vuvu
  • 4,886
  • 12
  • 50
  • 73

2 Answers2

2

This is due to the automatic minimum size of flex items. There is an excellent answer explaining this behavior which says:

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.

Basically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0.

You need to override min-width in some way on each flex container up the chain. It does not have to be 0 just any value other than auto. For example:

body {
  width: 400px;
}

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  padding: 10px;
  border: solid;
  min-width: 200px;
}

.flex-parent {
  min-width: 0;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="flex-parent-parent-parent">
  <div class="flex-parent-parent">
    <div class="flex-parent">
      <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
      </div>
    </div>
  </div>
</div>

In my example, I set all flex containers to have the same min-width value but this is not necessary. You could set each to be unique to it's needs in your layout.

.flex-parent { min-width: 0; }
.flex-parent-parent { min-width: 100px; }
.flex-parent-parent-parent { min-width: 400px; }

There is one other way to achieve this behavior, but still involves all nested flex containers:

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}

By setting some combination of min-width and/or max-width on each of your nested flex containers you should be able to get your text to truncate.

Besworks
  • 4,123
  • 1
  • 18
  • 34
  • In my question I wrote: Do I need to give all parents a min-width:0 or is ther a better work around? ... So there is no better solution. But thank you for the links! – vuvu Apr 06 '22 at 21:39
  • 1
    Unfortunately, there is no workaround that I've found which doesn't involve overriding `min-width` and/or `max-width` on all flex ancestors. – Besworks Apr 06 '22 at 21:46
  • You could set `.flex-parent-parent { overflow:hidden; }` with `.flex-parent { min-width:0; }` but this may have other unintended side-effects. – Besworks Apr 06 '22 at 21:50
-2

Is there a reason you have the text wrapped in so many divs? Because your problem now is that technically, the text isn't overflowing, rather the wrapper divs are. If you simply have your flex-child long-and-truncated wrapped in your flex-parent-parent-parent, the text overflow works as you expect.

sramirez0
  • 12
  • 3