CSS：垂直滚动两个绝对定位的div，而水平滚动条保持固定

Question

我确定我会混淆我正在尝试做的事情的解释，所以提前抱歉。

我有两个 absolutely 相邻的 <div> 元素高度完全相同，而右边的元素可能有水平溢出。

当出现水平溢出时，我希望 div（仅限 div）上的滚动条保持固定在 div 的底部，而 divs 在出现水平溢出时继续一起垂直滚动也是垂直溢出。

关键是我希望左侧的div 保持固定在其位置。许多现代文本编辑器都具有此功能（注意底部的滚动条和包含行号的左侧列）：

滚动前：

水平滚动后：

垂直滚动后：

无论您向右滚动多远，左侧的行号都保持不变，但它们会随着页面垂直滚动，并且水平滚动条始终可用。

我一直在尝试使用相对/绝对定位的容器元素的每一种组合来尝试解决这个问题，但我一直做得不够。这是我最近的尝试：

#div1
{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 150%;
	width: 60px;
	background: black;
}

#outer
{
	position: fixed;																																																																																											
	left: 0; 
	right: 0;
	bottom: 0;
	top: 0;
	overflow-x: auto;
}

#div2
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 150%;
	background: grey;
	overflow-x: scroll;
}

#div2-wrapper
{
	position: absolute;
	top: 0;
	right: 0;
	left: 60px;
	height: 50%;
}

#div1-wrapper
{
	position: absolute;
	top: 0;
	left: 0;
	height: 50%;
	width: 60px;
}

<div id="outer">
	<div id="div1-wrapper">
		<div id="div1">
		</div>
	</div>
	<div id="div2-wrapper">
		<div id="div2">
		</div>
	</div>
</div>

如果可能的话，我想避免使用 jQuery，但如果涉及到它，我也可以使用它。

编辑：澄清一下，我试图满足三个要求。 1：左边的div必须一直水平保持在起始位置（左右滚动不移动），2：左边的div必须垂直滚动，旁边有div，3：如果有水平溢出右侧的 div，它的滚动条必须始终保持在屏幕底部。谷歌表格和 Excel 也可以使用行号。

Answer 1

我认为这应该是您想要的： https://jsfiddle.net/pwo678ks/

我用 display: flex 将两列相邻放置在父级上（但如果您愿意，可以使用 float: left）。然后，父级垂直滚动，第二个div单独水平滚动。如果 2 个 div 中的 line-height 相同，则应该没问题。

编辑：您可以删除包装器内的 div。

#outer
{
  display: flex;
    left: 0; 
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: none;
  overflow-y: auto;
}

#div1-wrapper, #div2-wrapper
{
  height: 100%;
}

#div2-wrapper
{
  white-space: nowrap;
  overflow-x: scroll;
}

#div1-wrapper
{
    width: 60px;
}