共计 1511 个字符，预计需要花费 4 分钟才能阅读完成。
在弹性布局中，一个
flex子项的最终尺寸是根底尺寸（或内容尺寸）、弹性增长或膨胀、最大最小尺寸独特作用的后果。
最终尺寸计算的优先级是：
最大最小尺寸限度 > 弹性增长或膨胀 > 根底尺寸
- 根底尺寸由
flex-base属性或width属性，以及box-sizing盒模型独特决定；- 内容尺寸最指最大内容宽度，当没有设置根底尺寸是会顶替根底尺寸的角色；
- 弹性增长指的是
flex-grow属性，弹性膨胀指的是flex-shrink属性；- 最大尺寸次要受
max-width属性限度；最小尺寸则比较复杂，受最小内容宽度、width属性和min-width属性独特影响。
很早之前就遇到过这个问题但没有整顿，过后解决完问题之后就没有管了。昨天又遇到了同样的问题，因为嵌套的档次很深折腾了有 2 个小时，所以还是须要记录下来免得将来又忘了。
其实很简略，容器应用
width:0;flex:1;即可解决问题。
然而略微有点没有了解的是：为什么设置宽度为 0 时，应用 flex-grow:1 能够使容器放大，然而设置宽度为 100% 时，应用 flex-shrink:1 并不会让容器放大。
先来看一下问题复现吧:
CodePen Demo
在失常内容的时候不会呈现问题（能够点击 Demo 的 EDIT ON CODEPEN 最大化预览失常状况），但当元素外部的文字内容增多时，或者视窗放大时 flex 容器的宽度就会被内容撑开。
看起来是不是十分复杂？因为我嵌套了 2 层 flex 容器，最外部的容器 .list-item 因为内容太多被撑开了，并没有如愿依照残余空间放大子元素 .text 的宽度，同时宽度变大的 .list-item 导致内部的 .container 和 .wrap 也被撑开了。
被撑开的 flex 容器比拟多，不好阐明，那么看一下简略版的复现 Demo 👇
CodePen Demo 简略版
这个就很简单明了了，因为 .text 的内容太多，以致 .container 容器被撑开了，并且 .container 的宽度变大使 .wrap 的宽度也增大了，并不是依照构想的 100vw。同时文本题目超出省略的款式也没有利用到。
其实解决问题很简略，容器应用 width:0;flex:1; 即可解决问题。
然而我纳闷的是，为什么宽度设置为 0，flex 布局能够使容器放大，设置为 100% 就不能实现放大了。找了一圈也没见起因，问了一下肉大，他说可能和内容宽度有关系，让我看看张大佬的《CSS 新世界》。
🎉 果然在 6.2.12 这一节找到了相似的例子，并在 6.3 这一节中找到了具体解释。
那设置了 flex:1 属性后，容器为什么和预期体现不统一？（简写的 flex:1 具体简写了些什么？）
因为设置了 flex-basis 属性的元素的最小尺寸是最小内容的宽度（文字内容在所有换行点换行后的尺寸），而我设置了题目不换行导致最小尺寸比拟大，最终尺寸大于 flex:1 给到的 flex-basis:0%。(如果咱们把题目设置会换行容器就不会被撑开了）。
具体解释为：
flex-basis属性下的最小尺寸是由内容决定的，而width属性下的最小尺寸是由width属性的计算值决定的。
这里呈现的 “最小尺寸” 示意最终尺寸的最小值，所以在题目不换行的时候如果不设置 width 为 0 那么，flex 容器的宽度就会被内容撑开。当设置 width:0 之后，最小尺寸就为设置的 width 值了，就能够被 flex-grow:1 放大。
ok，以上就是 flex 容器被内容撑开的全部内容了，有条件的小伙伴能够动手一本《CSS 新世界》看看，里边的内容有很多讲些 CSS 新个性的实用例子，的确能够节约不少工夫。
文档
《CSS 新世界》- 张鑫旭
flex – CSS（层叠样式表）| MDN
flex-basis – CSS（层叠样式表）| MDN
