Check out this snippet of code, a simplified version of a larger piece:
html, body {
margin: 0 !important;
padding: 0 !important;
/* overflow-x: hidden; /* uncomment this line */
}
.app {
position: relative;
width: 100%;
text-align: center !important;
}
.left_panel {
top: 250px;
z-index: 20;
}
.panel {
background-color: #aaeaff;
}
.panel_gallery {
width: 256px !important;
}
.panel_gallery .panel_content {
overflow-y: auto;
}
.middle_right_panel {
position: absolute;
top: -100px;
z-index: 10;
left: 50%;
transform: translate(-50%);
}
.middle_panel {
margin-bottom: 270px;
}
.left_panel, .middle_panel {
display: inline-block;
}
.middle_panel {
transform: scale(0.6);
}<div class="app" style="display:inline-block;text-align:left;margin-top:10px;">
<div class="left_panel" style="position:relative;">
<div class="panel panel_gallery">
<div class="panel_content clearfix">
abc<br />
def<br />
ghi<br />
</div>
</div>
</div>
<div class="middle_right_panel" style="display:inline-block;">
<div class="middle_panel" style="position:relative;">
<div class="workspace" style="position:relative;display:inline-block;width:400px;height:400px;background-color:#80ff8f;" />
</div>
</div>
</div>Take a look at the JSFiddle: https://jsfiddle.net/qwt8mfo9/
If you spot one horizontal scroll on low window width as shown below:
https://i.sstatic.net/Wpkcc.png
There's a need to remove it.
Attempting with overflow-x like so:
html, body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden;
}
leads to an issue where content height is affected, causing the bottom of the window not to be reached by the div:
https://i.sstatic.net/v3WDc.png
Any insights on fixing this to ensure the div reaches the bottom again after removing the horizontal scroll?
Kindly provide any modifications on a forked JSFiddle.
Many thanks!