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

Question

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

我有两个 absolute位于<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，它的滚动条必须始终保持在屏幕底部。 Google 表格和 Excel 也使用行号来执行此操作。

Answer 1

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

我将两列并排放置，在父级上使用 display: flex(但如果您愿意，也可以使用 float: left)。然后，父级垂直滚动，而第二个 div 单独水平滚动。如果 2 个 div 中的行高相同，则应该没问题。

编辑:您可以删除包装内的 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;
}