Solution to CSS flex-basis text overflow problem

The insignificant flex-basis has caused a lot of trouble for the small function of adding ellipsis to text overflow. Let me demonstrate this below.

1. Flex family

There are many properties in flex, and the ones we often use are as follows:

.container {
  display: flex;
}

.container > .left {
  flex: 1;
}

.container > .right {
  flex: 1;
}

This makes it easy to achieve a layout that is equally divided on the left and right.

Let's look at an example that causes the problem:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        padding: 5px;
        border: 1px solid #ccc;
      }

      .no-effect {
        align-items: center;
        margin: 100px;
        width: 200px;
        color: #999;
      }

      .no-effect > div:first-of-type {
        margin-right: 10px;
      }

      p {
        color: red;
      }

      .no-wrap {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div style="display: flex;" class="no-effect">
      <div style="flex: 0 0 80px">I am shorter</div>
      <div style="flex: auto">
        <p class="no-wrap">I am very long, no kidding, I can grow to no end</p>
      </div>
    </div>
  </body>
</html>

The effect we want:

But the actual effect:

Why does this happen?

2. Flex-basis gets in the way

flex: auto is actually a collection of three properties:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

flex-grow indicates the enlargement ratio, flex-shrink indicates the contraction ratio, and flex-basis indicates the main axis space occupied by the item before allocating excess space.

Our left div does not expand or shrink, and its width is fixed at 80px; the right div automatically fills the remaining width, which is 200px - 80px = 120px, but the actual effect is far beyond 120px. This is due to the calculation when flex-basis is auto.

Let's look at the history of flex-basis: auto:

Initially, flex-basis was determined by width/height;
Later, there was a bug 1032922, and the calculation of flex-basis became determined by the width along the main axis;
Later, a bug 1093316 appeared, and the width/height was changed back to being determined, and a new concept of content appeared to automatically calculate the width/height;

So when we don't set width for flex-basis element, the width of flex-basis: auto is determined by the internal content and is limited by max/min-width .

In this way, when the internal content is free, the width of flex-basis element depends on max/min-width .

The default value of max-width is none , and the default value of min-width is generally 0 , but here it is auto , which is the reason for the "abnormality".

flex-basis element:

Common elements:

3. Solution

Once we know the cause, we can then prescribe the right remedy.

First, of course, you can set width attribute. As long as width is smaller than the remaining space, it is usually set to width: 0; this way you can be 100% sure that it is smaller than the remaining space;
The same is true if we don’t set width but use min-width to limit it. Since the flex item has min-width:auto , we also set a value smaller than the remaining space, usually min-width: 0;
Setting overflow:hidden to limit the overflow effect is also consistent.

Now that we have introduced three solutions, let’s talk about why the first two can be solved.

The first one is very simple. The width is set to 0, but flex-basis will make the element fill the remaining space, so it will be filled. Since the P element has an ellipsis that does not wrap, it will be displayed normally.

So what about the second one?

The second case is more complicated. When we set min-width value to something other than auto, the shrink-to-fit algorithm is used. The calculation mechanism of this algorithm is as follows:

min(max(preferred minimum width, available width), preferred width)

Translated into adult language:

Preferred minimum width: minimum width
Available width: Available width, that is, the width of the content box
Preferred width: The preferred width, the width when no line breaks are required except for explicit line breaks

shrink-to-fit width = min(max(minimum width, available width), preferred width)

So let's calculate:

Minimum width: 0
Available width: 272px
Preferred width: 200 - some random value for the remainder (98px)

By calculation, we can get:

max(0, 272) = 272

min(272, 98) = 98

So the final width is the remaining 98px. When we manually set min-width: 110px , we can see that it exceeds the overflow.

Summarize

CSS is not as easy to use as we think, there are rules to follow, but the process of finding it is a bit complicated... If you encounter something you don't understand, you can read more about how it came about and what it does, and you will understand the idea of solving it.

<<: Configure nginx to redirect to the system maintenance page

>>: JavaScript basics of this pointing