How to keep the content within the container in flex layout

Time:2021-4-21

On the mobile side, flex layout is very easy to use. It can automatically adjust the width of the container according to the width of the device. It is very convenient to use and has become increasingly inseparable from it. However, recently, I found a problem when I was working on a project.

It’s in a setting flex:1 If the text is very long, the text will go beyond the container instead of staying in the set dynamic remaining space. Because of the complexity of the actual project, it is difficult to explain it. Here, the problem is simplified as follows:

Basically, there is a main container with flex layout, a logo on the left with fixed width and height, and content on the right with dynamic width.


<div class="main">
    <img alt="" class="logo" src="pic.jpg">
    <div class="content">
        <h4 class="name">a name</h4>
        <p class="info">a info</p>
        <p class="notice">This is notice content.</p>
    </div>
</div>

.main {
    display: flex;
}
.logo {
    width: 100px;
    height: 100px;
    margin: 10px;
}
.content {
    flex: 1;
}
.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

. notice may be very long, some devices need to hide the display, that is, do not wrap, and leave an ellipsis Mark.

Here you will find that text overflow: ellipsis does not work, and the ellipsis does not appear at all. And because of setting nowrap, you will find that the text will spread the content, resulting in the content beyond the screen. So we have to solve this problem.

Attempt to cancel flex: 1 of parent element. Content, invalid.
Try to cancel display: flex of. Main container, ellipsis appears.

Therefore, guessing is the problem of flex layout. Further guessing ellipsis needs to limit the width of parent element.

Trying to set width: 100% on parent element. Content is invalid, but setting width: 0 is feasible. Namely:


.content {
    flex: 1;
    width: 0;
}

If the width is not set,. Content can be infinitely expanded by child nodes; therefore,. Notice always has enough width to display all text in one line, and it cannot trigger the effect of truncation and ellipsis. There is another way to achieve the effect of testing:


.content {
    flex: 1;
    overflow: hidden;
}

The above two methods can achieve the effect we need, that is, when flex is set to 1 for content, it will dynamically obtain the remaining width of the parent container, and will not be stretched by its own child elements.

After testing, the following methods are invalid:

Set max width to HTML and body, and the element seems to be able to force the page width;
If overflow is set for the body, the page width cannot be widened, but the element width remains, that is, the element itself overflows;
Set max width and overflow to HTML and body at the same time, limit the page width to max width, and overflow the element itself;
to . Main container setting overflow : The same goes for hidden . Main doesn’t overflow, . Notice itself is overflow;
Set the width or max width to the. Notice element. Although the width is limited, omit the character in a specific width Sometimes only two points are displayed

Here is the article about the solution of keeping the content within the container in flex layout. For more information about keeping the content within the container in flex layout, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!