当flex布局遇上min-width

这几天遇到一个及其神奇的事情：当我的 flex 布局加上 white-space:nowrap，子元素就溢出了！

---

在项目的某个页面中要做一个Menu（这个Menu不是项目的主Menu，而是某个页面中的内容），预想是做成这个样子的：

因为Menu必须要和旁边一样高，而rightContent的内容是动态的，不确定究竟有多高，想到用绝对布局，但这种绝对布局，还是能不用就不用吧。然后我就用flex 布局，写了这样的样式代码：

// [less代码]
// 最外层的灰色框
.container {
	display: flex;
    // 左边的Menu
    .leftMenu {
        width: 150px;
    }
    // 右边的内容(小黄框我用的是栅格布局，这里就不po代码了)
    .rightCont {
        flex: 1;
        .div {
            white-space: nowrap; // 这个太关键了！
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}

然后就不得了了，渲染出来和想象中的不一样啊：

（啊！！！我的眼睛！！！）
为什么会这样？！吓得我赶紧去找原因。开始也不知道是为什么，一点点注释了看看，把white-space: nowrap注释掉的时候，居然就不会撑出来了！

---

找到原因：由于默认的最小尺寸是内容尺寸，所以当设置 white-space: nowrap 时，文本不能自动换行，内容宽度就开始撑出。所以我们主动告诉渲染引擎最小宽度是0，你放心缩好了，溢出问题就解决了。

关键就是给需要缩的元素设置min-width: 0px。
解决成功后的代码：

[less代码]
// 最外层的灰色框
.container {
	display: flex;
    // 左边的Menu
    .leftMenu {
        width: 150px;
    }
    // 右边的内容
    .rightCont {
        flex: 1;
        min-width: 0; // 这个样式，拯救了一切！
        .div {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}