有如下的布局：
<div class="container">
<div class="left">Left</div>
<div class="right">
<div class="right-content">
Right: Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, expedita.
</div>
</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.container {
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: flex;
}
.left {
/* width: 50px; */
flex: 0 0 50px;
background-color: cadetblue;
}
.right {
flex: 1;
}
.right-content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
此时按理说右边的元素宽度应该为150，right-content宽度也是150，内容应该超出隐藏，但是结果并不是这样。
解决办法：
- 给
right元素设置宽度为0，width: 0;。 - 给
right元素设置超出隐藏，overflow: hidden;。
原因大概是因为right元素虽然是flex: 1;，占满了剩余的所有空间，但是自己的宽度还是会被自己的子元素撑开，导致子元素不会被超出隐藏，经过测试只要设置一个宽度在[0, 剩余宽度]之间的任意值（即设置一个比flex: 1;能拿到的最大宽度小的值，最终的值都是flex: 1;拿到的宽度）都可以达到预期效果。设置overflow: hidden;也是可以的，这样宽度也是flex: 1;拿到的宽度。
参考文章