Solution to CSS flex-basis text overflow problem

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

Recommend

Solution to the problem that the MySQL database cannot be accessed by other IP addresses

Preface Still referring to the project mentioned ...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

Complete steps to implement face recognition login in Ubuntu

1. Install Howdy: howdy project address sudo add-...

Discussion on style customization and browser compatibility issues when using input element [type="file"]

I encountered such a problem when doing the writte...

Vue data responsiveness summary

Before talking about data responsiveness, we need...

Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis

This article uses examples to describe advanced u...

js+Html to realize table editable operation

This article shares the specific code of js+Html ...

Detailed example of using CSS to beautify HTML form controls (form beautification)

1. Basic syntax structure of HTML submit and bott...

How to view available network interfaces in Linux

Preface The most common task after we install a L...

Implementation of nginx proxy port 80 to port 443

The nginx.conf configuration file is as follows u...

Specific use of Linux man command

01. Command Overview Linux provides a rich help m...

MySQL/MariaDB Root Password Reset Tutorial

Preface Forgotten passwords are a problem we ofte...

How to disable foreign key constraint checking in MySQL child tables

Prepare: Define a teacher table and a student tab...

Analysis of the Neglected DOCTYPE Description

doctype is one of them: <!DOCTYPE HTML PUBLIC &...

A brief analysis of the count tracking of a request in nginx

First, let me explain the application method. The...