1. The flex layout sub-element has a fixed width on the left and an adaptive width on the right. When the content on the right exceeds the width, the width on the left will be stretched.
<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>
You can see that in a box with a width of 500px, the left width is a fixed width of 200px, and the right flex:1 is adaptive. However, when the width of its child element is set to 400px, it has exceeded the remaining maximum width of 300px. At this time, the left width is affected. extrusion
Solution:
.right{
width:0; //or min-width:0
} can solve the problem
You can also set
.left{
flex: 0 0 auto; //or flex-shrink: 0;
}
2. Flex layout will cause text omission to fail
<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>
The solution is to add a layer of labels
.box{
display: flex;
width: 500px;
height: 200px;
border: 1px solid #000;
.text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}