How to make flex-box work with a nested child that needs truncated text?-CodePudding

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

HTML

  <div >
    <div >
      <div >
        <div >
    1. This is a long string that is OK to truncate please and thank you
        </div>
      </div>
    </div>
</div>

CSS

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;
}

CodePudding user response：

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 >
  <div >
    <div >
      <div >
    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.

CodePudding user response：

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.