An old problem with flex layout in recent projects is that setting Flex :1 does not limit the size of a Flex child element when the child element in the flex child element is too wide for the parent element. The specific performance is as follows:

html

<div class="wrap">
    <div class="left"></div>
    <div class="right">
        <div class="right-content">
            adasdasdasdadasdasdasdasdasadasdasdasdadasdasadasdasdasdadasdasdasdasdasadasdasdasdadasdas
        </div>
    </div>
</div>
Copy the code

css

.wrap {
    width: 300px;
    height: 100px;
    margin: 30px 0;
    display: flex;
    border: 1px solid red;
    .left {
        flex: 0 0 100px;
        background: lightgray;
    }
    .right {
        flex: 1;
        background: lightblue; & -content {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: lightyellow; }}}Copy the code

As you can see, the text on the right exceeds the width of the.wrap and is not hidden. I have encountered this situation before and forgot it without paying too much attention. It seems necessary to summarize it.

Problem analysis

  • .rightHow to calculate the width of?

The normal element width, if specified, is the set value; If not set, it is the width occupied by the element’s content area. As you can see from the above example,.right does not set the width property, so.right is supported by.right-content. The flex: 1 attribute is set to the flex box child, so:

.right width =.right content occupied width (i.e..right-content width) + Flex: 1 property allocated widthCopy the code
  • .rightThe box is setflex: 1; Why does the width exceed the parent element?

This is a common mistake with Flex layouts: When you assign flex attributes to a child element, it is natural to assume that it will allocate the width of the parent element proportionally. Because most of the time that happens to be the case, it’s not. Let’s understand flex: 1 again. (Flex is short for flex-grow, Flex-shrink, and Flex-basis, which I won’t cover here. Details here)

As you can see,Flex: 1.It doesn’t determine the width of the child element, it just dictates, if the parent element has extra space, what proportion of the remaining space is allocated, and it doesn’t do anything to the space that the child element already occupies. So, when the original width of the element exceeds the width of the parent element, the child element content exceeds.

The solution

  1. Limit the original width of the child element,.rightSet up thewidthattribute

Modify the. Right element CSS as follows,

.wrap{....right {
        width: 0; / / newflex: 1;
        background: lightblue; & -content{... }}}Copy the code

Principle: Set the width of the. Right box to 0, so that the width of the. Right box is allocated by flex: 1.

Chrome works perfectly:

In Firefox, however, setting width: 0 does not take effect, and the child element is exceeded. Width: 0; width: 0; I don’t know how to set min-width: 0, but it smells good.

  1. .rightSet up theoverflowProperties forvisible

Setting width: 0 works if the.right-content element width inherits the parent element. Right. If the.right-content element sets its own width, method 1 will not be satisfied, as shown below:

Set the. Right-content element CSS as follows, and the child elements will still be exceeded

.wrap{....right {
        width: 0; / / newflex: 1;
        background: lightblue; & -content {
            width: 300px; / / newoverflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: lightyellow; }}}Copy the code

This is where we get back to the basic CSS problem of how to display child element content beyond the overflow set for.right. Ok

The normal CSS is as follows

.wrap{....right {
        // width: 0;
        flex: 1;
        background: lightblue;
        overflow: auto; / / new & -content {
            width: 300px; / / newoverflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: lightyellow; }}}Copy the code

conclusion

  1. Set up theMin - width: 0Can solve whenFlex child elementsIs a child element of sizeautoThe situation;
  2. Set up theoverflowDon’t forvisibleCan solve the problem in all cases;

Go full circle, go back to where you started, take notes.