html - 删除窗口的水平滚动会影响内部 DIV 的高度

Question

我有以下代码，它是对更大代码的简化:

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>

这是 JSFiddle:https://jsfiddle.net/qwt8mfo9/

当窗口宽度较小时，会出现一个水平滚动条，如下所示:

我需要摆脱它。

然后我尝试使用 overflow-x 如下:

html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

但随后我得到以下信息，您可以在其中看到内容的高度受到影响，导致 div 未到达窗口底部:

关于如何在移除窗口的水平滚动后使 div 再次到达窗口底部的任何想法？

如果可能，请提供一些 JSFiddle 分支。

谢谢!

Answer 1

试试下面的代码:

.middle_right_panel {

position: absolute;
top: -100px;
z-index: 10;
left: 0;
right: 0;

用上面的代码替换“.middle_right_panel”的CSS。