flex布局子元素宽度超出父元素问题

JackTian
41,242 阅读3分钟

最近在做项目中，使用flex布局遇到了个老问题：当flex子元素里的子元素的宽度过大，超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸；具体表现如下：

image.png

html

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

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;
        }
    }
}

可以看到，右侧的文本超出部分没有隐藏，而且超出了.wrap的宽度。之前也遇到过这种情况，没太注意就给忘了，看来有必要总结一下；

问题分析

  • .right的宽度该如何计算？

正常情况下的元素宽度，如果设置有具体的值，那就是设置的值；如果没有设置，那就是该元素内容区占据的宽度。上面的例子可以看到，.right并没有设置width属性，所以.right是由.right-content撑开。又由于是flex盒子子元素，设置了flex: 1属性，所以:

.right宽度 = .right内容占据宽度(即.right-content宽度) + flex: 1属性分配的宽度
  • .right盒子已经设置flex: 1；为什么宽度还会超出父元素？

这是使用flex布局很常见的一个误区：给子元素设置了flex属性，很自然的就认为，它会按比例分配父元素的宽度。因为大多时候恰好是这样，其实并非如此。我们再来好好理解一下flex：1的含义(flex是flex-grow、flex-shrink和flex-basis的缩写，这里就不做介绍。详情点这里）

image.png 可以看出，flex：1并不是决定子元素宽度的因素，它只是规定了，如果父元素有多余空间，以怎样的比例去分配剩余空间，并不会对子元素原本就占据的空间做处理。所以，当元素原本的宽度就超过父元素宽度时，子元素内容就会超出。

解决方案

  1. 限制子元素原本宽度，.right设置width属性

修改.right元素css如下，

.wrap {
    ...
    .right {
        width: 0; //新增
        flex: 1;
        background: lightblue;
        &-content {
            ...
        }
    }
}

原理：强行设置.right原本宽度为0，让.right盒模型宽度完全由flex: 1这个属性来分配。

chrome浏览器效果完美：

image.png

但是在firefox浏览器时，即使设置width: 0，也不会生效，子元素还是超出；同事提出可以设置min-width: 0，试了一下，果然可以。虽然还没搞明白设置min-width: 0的原理是什么，但是真香。

注：根据keyingfu0同学评论，设置min-width: 0可行的原理：www.w3.org/TR/css-flex…

  1. .right设置overflow属性不为visible 设置width: 0可行的前提是:.right-content元素宽度继承父元素.right。如果当.right-content元素设置了自己的宽度时，方法1就不能满足了，如下所示：

image.png

设置.right-content元素css如下，子元素依然会超出

.wrap {
    ...
    .right {
        width: 0; //新增
        flex: 1;
        background: lightblue;
        &-content {
            width: 300px; //新增
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: lightyellow;
        }
    }
}

这时候就回到了基本的css问题，子元素内容超出如何展示，给.right设置overflow搞定

正常css如下，让

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

总结

  1. 设置min-width：0可以解决当flex子元素的子元素大小为auto的情况；
  2. 设置overflow不为visible可以解决所有情况下的麻烦；

兜兜转转一大圈，回到最初的原点，随手记录一下。

avatar
文章
阅读
粉丝