I need help ensuring that the inner div, colored red, stays hidden within its parent div, which is blue. I attempted to use overflow: hidden; in CSS but it did not have the desired effect. I am looking for a solution using solely CSS since JavaScript causes issues with my SharePoint pages.
Is there a way to achieve the desired overflow hidden result?
.container {
left: 0px;
width: 800px;
height: 1200px;
background: green;
}
.outer {
position: absolute;
left: 0px;
width: 600px;
height: 1000px;
background: blue;
overflow: hidden;
}
.inner {
position: fixed;
width: 100px;
height: 600px;
background: red;
margin-left: 0px;
}<div class="container">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>