浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

一、问题背景

1、bug 描述

  某日被告知有一个bug:在网页宽度较小时,发现 Flex 容器被子元素撑大导致UI显示异常的问题,如下浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  这是什么鬼...我期待它不管什么时候都能像下面这样显示(不撑破父容器),就如这样:

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

2、问题解决:

  我试了试,发现给 flex-item 容器加个overflow:hidden 属性之后,完美解决问题。

  然后又试了试,发现加 min-width: 0 也可以解决这个问题。

二、原因剖析

1、起初我以为这个问题出现在 Flex 嵌套之中,如果不是嵌套的话,那么 Flex 容器并不会被 Flex 的项目撑破。

  可以看个 demo:https://codepen.io/yvettelau/pen/OJWMdoM?editors=1100

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  如果我们删除掉 div class="main" 那一层,那么表现良好,即每个 item 都按照预期缩小了。

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  然而具体原因是啥还是不清楚,搜索引擎找了一番也没找到什么有说服力的答案,于是,我决定研究一下 flex 的规范(https://www.w3.org/TR/css-flexbox-1/#min-size-auto),看到如下一段话:

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  通过阅读标准,可以发现:

(1)在非滚动容器中,主轴方向 Flex Item 的最小尺寸是基于内容的最小尺寸,此时 min-width 的值是 auto

(2)对于滚动容器,min-width 的值是 0(默认讨论水平布局)

  读到这里,我意识到这个问题跟 Flex嵌套 应该没什么关系,不嵌套应该也一样存在这个问题,于是我又新写了个demo,可以戳这个查看:https://codepen.io/yvettelau/pen/poRgYPK?editors=1100

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  当 item 的内容 child 宽度是250px时,此时也不能按照预期缩小。可能这个时候,第一反应是给 item 加 flex-shrink,然而并木有用。—— 当 min-width auto 时,其最小尺寸是基于内容的,加 flex-shrink 是没有作用的。

  这个时候就乖乖按照规范教的操作吧,例如,我们给 item 设置 min-width:0 ,这个时候,item 会按照预期缩小,平分500px的大小。

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

  另外,规范也说明了在滚动容器中,min-width 也是 0,所以,给 item 增加 overflow: auto 或者 overflow: hidden 也一样可以达到目的

  现在,我们再回过头来看文章最开始的问题。看起来是 Flex 嵌套导致的问题,其实是因为嵌套在里面的 div ,它不仅仅是 Flex 容器,同时它也是一个 Flex Item。因此,我们可以给它加上 overflow: hidden 或者是 min-width: 0 来阻止它撑破父容器。

主要来源文章:https://mp.weixin.qq.com/s/3f2JcwENd78Cv3JBYSr9Eg

浅析flex布局被子元素内容撑破的问题 - Flex布局中一个不为人知的特性(flex-item项目的最小尺寸问题)

上一篇:魔板 usaco,信息学奥赛一本通


下一篇:OB-管理oceanbase集群参数