I have a tooltip here where I'm displaying a list of emails that are tracked and It is required to have a certain height. so, I have added overflow. if I'm doing that I'm losing the speech bubble which is placed as pseudo-element. uncomment the line which I have stated in css. I had looked into the similar StackOverflow questions regarding the similar issue but they don't work in my case .
here's jsfiddle link
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.tooltip_container {
background: white;
height: 150px;
width: 350px;
z-index: 100;
display: block;
position: absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, 0.34);
/* uncomment to see the change */
/* overflow-y: scroll; */
}
.tooltip_container::-webkit-scrollbar {
width: 5px;
}
.tooltip_container::-webkit-scrollbar-thumb {
background-color: darkgrey;
}
.tooltip_container::after {
content: " ";
position: absolute;
left: 20%;
top: 0;
width: 0;
border-bottom: 15px solid #dbdeb5;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
transform: translateY(-100%);
}
.track_event img {
width: 15px;
height: 15px;
}
#track_events {
height: 30px;
width: 100%;
background: #dbdeb5;
}
#track_events_list {
margin-bottom: 25px;
}
.track_event {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: baseline;
margin: 0 15px;
height: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.mail_viewer_info {
display: flex;
flex-direction: column;
align-content: flex-start;
text-align: start;
}<div class="center">
<div class="tooltip_container">
<section id="track_events"></section>
<section id="track_events_list">
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">[email protected]</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">[email protected]</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">[email protected]</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
</section>
</div>
</div>
overflow: scroll;, elements outside the bounding box are hidden implictly (as withoverflow: hidden;). You can take a look at this question to see how to work around that, but you'll most likely have to change your markup structure.