这是codepen链接： https://codepen.io/anon/pen/vbXyGj?editors=1100
基本上，我想要实现的是在悬停时完全显示hover tip文字
删除overflow可以解决此问题，但我们无法滚动到视图之外的元素。
此处包含为摘要：
[
具有emmet结构（如果有帮助）：
ul>li*100>span.icon{$}>div.hover-text{hover tip}
]
.wrapper {
position: relative;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
background: blue;
z-index: 100;
}
.sidebar-sticky {
position: relative;
top: 45px;
height: calc(100vh - 45px);
padding-top: 0.5rem;
/* overflow-x: hidden; */
overflow-y: auto;/* removing this works but no scroll this time */
}
ul {
list-style-type: none;
color: white;
padding: 5px;
}
.icon {
position: relative;
padding: 10px 5px;
margin: 5px;
}
.hover-text {
display: none;
position: absolute;
background: green;
padding: 10px;
color: black;
z-index: 200;
top:0;
left:0;
white-space:nowrap;
}
.icon:hover .hover-text{
display:block;
}<div class="wrapper">
<nav class="sidebar">
<div class="sidebar-sticky">
<ul>
<li>
<span class="icon">
1
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
2
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
3
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
4
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
5
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
6
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
7
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
8
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
9
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
10
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
11
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
12
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
13
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
14
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
15
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
16
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
17
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
18
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
19
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
20
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
21
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
22
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
23
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
24
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
25
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
26
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
27
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
28
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
29
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
30
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
31
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
32
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
33
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
34
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
35
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
36
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
37
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
38
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
39
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
40
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
41
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
42
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
43
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
44
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
45
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
46
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
47
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
48
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
49
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
50
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
51
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
52
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
53
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
54
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
55
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
56
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
57
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
58
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
59
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
60
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
61
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
62
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
63
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
64
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
65
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
66
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
67
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
68
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
69
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
70
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
71
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
72
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
73
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
74
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
75
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
76
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
77
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
78
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
79
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
80
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
81
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
82
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
83
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
84
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
85
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
86
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
87
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
88
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
89
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
90
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
91
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
92
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
93
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
94
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
95
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
96
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
97
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
98
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
99
<div class="hover-text">hover tip</div>
</span>
</li>
<li>
<span class="icon">
100
<div class="hover-text">hover tip</div>
</span>
</li>
</ul>
</div>
</nav>
</div>