为何.child-1-2无法随文本扩展？修改.child-1-1的flex-basis为auto后正常的原因

咱们一步一步拆解这个Flex布局的问题：

首先看你的结构，.parent-1是外层flex容器，里面有两个子项：.child-1和.child-2。其中.child-1本身也是个flex容器，包含.child-1-1和.child-1-2。

当.child-1-1设为flex: 0 0 50px时 #

这个属性的意思是：.child-1-1固定占50px宽度，既不放大也不收缩。

再看.child-1的属性是flex: 0 0 auto——它作为.parent-1的子项，不会放大、不会收缩，初始宽度由内部内容决定。但这里有个关键：.child-2的属性是flex: 1 0 auto，它会优先占据.parent-1的剩余可用空间。

这就导致：.parent-1会先给.child-2分配足够的空间（满足它的内容宽度后，再占满剩余空间），剩下的空间才给.child-1。如果这个剩余空间小于.child-1内部两个子项的总宽度（50px + .child-1-2的文本宽度），.child-1的宽度就会被限制在这个剩余空间里。

而.child-1作为flex容器，默认flex-wrap: nowrap，内部子项必须在一行。.child-1-1固定占50px，.child-1-2的属性是flex: 1 0 auto——它会填充.child-1内部的剩余空间（也就是.child-1的宽度减去50px），但因为flex-shrink: 0，它不会收缩来适配文本长度，所以文本就会溢出容器。

当把.child-1-1的flex-basis改成auto后 #

此时.child-1-1的宽度由自身内容决定，不再是固定的50px。.child-1作为.parent-1的子项，因为flex-shrink: 0，它不会被收缩，所以它的宽度会被内部两个子项的总宽度撑开（.child-1-1的内容宽度 + .child-1-2的文本宽度）。

这时候.parent-1的空间如果不够容纳.child-1和.child-2的总宽度，就会出现横向滚动，但.child-1-2的宽度完全匹配文本长度，自然就不会有溢出问题了。

内容的提问来源于stack exchange，提问作者Serhii Ka.