当flex布局遇上white-space

这几天遇到一个及其神奇的事情：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会影响flex布局，但是不知道为什么有影响啊。

---

好，那下一步着手解决。
网上都说，给设置display: flex的元素设置min-width: 0px。试试看，没有用啊，原来咋样还是咋样。。。心很累。。。
另外弄了个demo自己试，不停试。终于成功了！
解决成功后的代码：

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

网上说，min-width: 0px放在设置了flex的容器里，但是我这里并没有用，我把这句代码放在了宽度受影响的最外一层元素，然后flex布局就被拯救回来了。

---

可是为什么设置min-width: 0px就OK了？
我试了下，min-width这个属性，不管设置什么值，都可以解决这个问题，只是设为0，对不想设置宽度的元素没什么影响。
那设置max-width呢？也是可以改变宽度的，但是对于这种随时变化的，设置max-width会限制掉其宽度的上限，而且在设定的上限范围内的情况下还是会被撑开，所以这种情况设置这个属性没啥用。
并且直接设置宽度width: 0px，也是可以的解决的，但是设置的值太高了也会出现max-width的那种情况。
所以就是说，white-space:nowrap会影响flex布局下未设定宽度的元素，而只要对元素的宽度有一个下限设定就可以解决这个问题，不管是最小宽还是直接的宽度（max-width没啥用）。
至于为什么会出现这个问题？这个…这个…目前我也没找到答案。