Flex布局设置内容强制不换行无效的解决方法_div flex:1 不换行

使用弹性盒子Flex布局非常方便，比如实现左右布局的时候，简短的两行样式就实现了。不过虽然Flex布局很灵活，但有时候也会出现一些意想不到的效果，比如这里举个简单的示例：

<style>
.mybox {
 width:600px;
 display:flex;
 color:#fff;
}
.left {
 flex:2;
 height:100px;
 background-color:#579;
}
.right {
 flex:1;
 height:100px;
 background-color:#2c9;
}
</style>
 
<div class="mybox">
  <div class="left"><p>最美的不是下雨天，是曾与你躲过雨的屋檐。试着听你听的歌，走你走过的地方。</p></div>
  <div class="right"><p>测试文字</p></div>
</div>

这里通过Flex实现左右两个区块的左右布局，并设置了左右两个区块的宽度比为2:1，得到了如下图所示的效果：

此时有个需求，希望设置左区块内的文字强制不换行，超出的部分隐藏，所以理所当然的想到设置如下的定义：

.left p {
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

然而此时得到的效果如下图：

这里的文字并没有超出部分隐藏，可是将原本的区块宽度给撑大了，造成之前设置的比例无效，要解决此问题，不妨给左区块定义一个宽度，如：

.left {
 flex:2;
 height:100px;
 width:50%;
 background-color:#579;
}

这里虽然设置了50%，但并不会让左区块宽度真的变为总宽度的50%，而是恢复了之前所定义的比例，事实上这里即使将宽度设置为0也可以正常显示，但就是不能不设置。