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; }保持固定在它的位置。许多现代文本编辑器都具有此功能（请注意底部的滚动条和左侧包含行号的列）：

滚动前：

滚动HORIZONTALLY：

垂直滚动后：

左侧的行号保持固定，无论您向右滚动多远，但它们与页面垂直滚动，水平滚动条始终可用。

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

＆＃13;

＆＃13;

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

＆＃13;

SCNBillboardConstraint

＆＃13;

＆＃13;

＆＃13;

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

编辑：澄清一下，我试图满足三个要求。 1：左边的div必须始终保持在水平的起始位置（向左或向右滚动不会移动它），2：左边的div必须垂直滚动，旁边有div，3：如果有水平溢出右侧div，它的滚动条必须始终保持在屏幕的底部。 Gooogle表格和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;
}