Sticky item staying relative to the parent - html

Question

I have a sticky sidebar that I'm trying to keep inside parent class. That is staying inside the .inner box.
Currently, it is overflowing into the .outside box.
Here is the JSFiddle with an example - https://jsfiddle.net/dky2eb3m/10/
HTML:
<div class="parent">
<div class="other">
</div>
<div class="inner">
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
<div class="content">
One
</div>
<div class="content two">
TWO
</div>
<div class="content three">
Three
</div>
</div>
</div>
<div class="outside">
</div>
SCSS
.content {
height: 400px;
background: red;
&.two {
background: green;
}
&.three {
background: grey;
}
}
.other {
height: 300px;
background: yellow;
}
.parent {
//overflow: hidden;
}
nav {
position: sticky;
top: 25%;
left: 100%;
height: 0;
ul {
display: flex;
flex-direction: column;
li {
list-style: none;
position: relative;
background: white;
width: 80px;
height: 80px;
display: block;
border-radius: 10px;
color: #f47324;
}
}
}
.outside {
height: 400px;
background: orange;
}

Answer 1

You want your nav to be inside then you can do that like this.
* {
box-sizing: border-box;
}
body {
height: 3000px;
}
.content-parent {
background: purple;
width: 100%;
}
.sidebar {
float: left;
position: sticky;
top: 30px;
}
nav ul {
display: flex;
flex-direction: column;
}
nav ul li {
list-style: none;
/* order: 999; */
position: relative;
background: white;
width: 80px;
height: 80px;
display: block;
border-radius: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #f47324;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.outside {
height: 400px;
background: orange;
}
.content {
height: 400px;
background: red;
}
.content.two {
background: green;
}
.content.three {
background: grey;
}
.other {
height: 300px;
background: yellow;
}
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</div>
<div class="content-parent">
<div class="content">
One
</div>
<div class="content two">
TWO
</div>
<div class="content three">
Three
</div>
</div>
</div>
<div class="outside">
</div>