flex布局遇到的一些坑记录

1.flex布局子元素左侧固定宽度，右侧宽度自适应，当右侧内容超出时会拉伸左侧宽度

<template>
	<div class="box">
		<div class="left">123</div>
		<div class="right">
			<div class="text">内容</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
.box{
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
	.left{
		width: 200px;
		background-color: red;
	}
	.right{
		flex: 1;
		background-color: green;
		.text{
			width: 400px;
		}
	}
}	
</style>

 可以看到在宽度为500px的盒子里，左侧宽度为固定宽度200px,右侧flex:1自适应，但是当其子元素宽度设为400px时已经超出剩余最大宽度300px,此时左侧宽度受到挤压

解决办法：

.right{

     width:0；  //或者min-width:0

}  都能解决问题

也可以设置 

.left{

    flex: 0 0 auto;  //或者  flex-shrink: 0;

}

2. flex布局会导致文本省略失效

<template>
	<div class="box">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
.box{
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}	
</style>

 解决办法加一层标签

.box{
    display: flex;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
    .text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}