$('.child_1').click(function(){
$(this).toggleClass('left').siblings().toggleClass('left');
});* {box-sizing: border-box;}
.parent {
width: 500px;
position: relative;
border: 1px solid #ccc;
overflow: hidden;
}
.child_1 {
background-color: rgba(255,255,0,.6);
width: 100%;
float: left;
height: 100px;
z-index: 1;
transition: all .5s;
}
.child_1.left {
width: 30%;
}
.child_2 {
width: 70%;
padding-left: 15px;
left: 100%;
transition: all .5s;
}
.child_2.left {
left: 30%;
}
.child_2 > div {
background-color: rgba(0,255,255,.6);
height: 200px;
}
.child_2 > div > div {
overflow: hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p>Relative</p>
<div class="parent">
<div class="child_1"></div>
<div class="child_2 relative">
<div>Content of child_2<div></div></div>
</div>
</div>
<hr />
<p>Absolute</p>
<div class="parent">
<div class="child_1"></div>
<div class="child_2 absolute">
<div>Content of child_2<div></div></div>
</div>
</div>The parent div needs to have overflow set to hidden in order to conceal child_2 when it extends outside the parent boundary;
The parent div cannot have a specified height because the exact height of child_2 is unknown (even though it's provided in the example).
To hide the child_2 div, I have experimented with two approaches:
The first method involves relatively positioning child_2, but as you can observe, the content inside child_2 ends up in an incorrect position;
The second approach uses absolute positioning for child_2, however, an absolutely positioned element is unable to determine the parent element's height, resulting in the content within child_2 getting cut off when the parent div has hidden overflow.