[CSS] flex布局+white-space: nowrap宽度异常

在flex布局中，定义一行三列并列的3个div，其中2个div宽度写定，第3个div随着父容器宽度由flex自适应。这是个很常见的布局，平常使用没有啥问题。

现在在第3个div中放置一段长的纯文本(文本内容单行放置宽度大于第3个div的宽度)，且设置white-space: nowrap，此时就会出现第3个div的宽度被文本撑开，变为单行文本的宽度，而不受flex布局的约束。且由于第3个div的宽度过宽，3个并列子元素会溢出父容器。

下面的图中中间灰色部分的div是”第3个div”。

要解决这个问题(让第3个div的宽度受到flex布局中父元素的约束，而不是被文本元素撑开)，需要在第3个div上添加”min-width: 0”。

添加”min-width: 0”之后，未写定宽度的第3个div的宽度会由父元素宽度减去第1个div和第2个div的宽度自适应得到。

如果布局中有多层flex嵌套，出现了由white-space: nowrap产生的宽度异常，那么需要将所有的不受flex布局父元素约束的子元素(即没有显式的写定宽度的”第3个div”)都加上min-width: 0;

完结。