具有flex属性的div重叠

Question

我使用angular和angular-material来创建自定义指令。一切都是正确的，只是当我在指令链接函数中将flex属性添加到一个div时，内容会重叠。

示例：

http://jsfiddle.net/9crdbz4t/

<div layout="row">
    <div flex=10>example.long.email@example.com.zzz</div>
    <div flex>Some other text that require more space</div>
</div>

如果内容大于弹性值，我该如何调整内容？