Detailed explanation of the solution to keep the content within the container in flex layout

On the mobile side, flex layout is very useful. 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 indispensable. However, I recently discovered a problem when working on a project.

That is, in a container with flex:1 set, if the text is very long, the text will exceed the container instead of staying in the set dynamic remaining space. Since the actual project is quite complicated, it is difficult to explain it, so here we simplify the problem as follows:

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

<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 and needs to be hidden on some devices, that is, it does not wrap and leaves an ellipsis... as a mark.

Here you will find that text-overflow: ellipsis does not take effect and the ellipsis does not appear at all. And because nowrap is set, you will find that the text will expand the content, causing the content to exceed the screen. So this problem must be solved.

Tried to cancel flex: 1 of the parent element .content, but it didn't work.
Try to cancel the display: flex of the .main container, and the ellipsis will appear.

Therefore, it is speculated that it is a problem with the flex layout, and further speculated that the ellipsis needs to limit the width of the parent element.

Trying to set width: 100% on the parent element .content doesn't work, but setting width: 0 does. Right now:

.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 the truncation effect cannot be triggered. There is another way to test the effect:

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

The above two methods can achieve the desired effect, that is, when the content is set to flex 1, 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:

Setting max-width for html and body elements seems to force the page width;
Set overflow for body, the page width cannot be expanded, but the element width remains, that is, the element itself still overflows;
Set max-width and overflow for html and body at the same time. The page width is limited to max-width, but the element itself still overflows.
Set overflow: hidden to the .main container. Similarly, .main does not overflow, but .notice itself still overflows.
Setting width or max-width for the .notice element, although the width is limited, the ellipsis... is not fully displayed at a certain width, sometimes only two dots are displayed..

This concludes this article on how to keep content within the container in flex layout. For more information on how to keep content within the container in flex layout, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!