如何仅用CSS修改垂直滚动条位置同时保留水平滚动条初始位置

首先明确定义：

• Scroll position：滚动条上滚动手柄的当前位置
• Position of the scrollbar：滚动条位于元素（div）的哪一侧（ltr布局默认在左侧）

我想要将div（树结构展示容器）的垂直滚动条置于右侧，同时保持内容为ltr布局。我很快找到了至少两种实现方案。但应用任意方案后都存在问题：水平滚动条初始位置被设置在最右侧，由于内容仍是ltr布局，滚动位置停在内容末尾，完全不符合预期，且用户需要“往回滚动”才能查看全部内容，UX体验较差。

可以使用Javascript设置滚动位置，但本场景下无法使用Javascript。

相关实现代码如下：

.main {
     width:150px;
     height:150px;
     direction: rtl;
     overflow:scroll;
}
.inside {
      direction: ltr;
      width:300px;
}

<div class="main"><div class="inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam lectus vel erat feugiat, id maximus quam iaculis. Etiam vitae eleifend nisi. Phasellus pellentesque dui ex. Proin sit amet metus quis quam sagittis pretium at ac velit. Mauris ultricies metus nec tortor dignissim, in pellentesque libero consectetur. Nullam nec enim sit amet leo congue finibus. Curabitur ligula dolor, aliquet eget erat et, laoreet vehicula nibh. Suspendisse eu lacus sapien. Nulla facilisi. Nulla placerat mauris sit amet ultrices sollicitudin. Quisque sed bibendum ante. Integer id magna sollicitudin, scelerisque neque vitae, tincidunt quam. Integer et aliquam sem, at tempus dui. Etiam sit amet ornare lacus, at placerat leo. Donec pharetra diam sit amet nisl dapibus suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. SedNulla placerat mauris sit amet ultrices sollicitudin. Quisque sed bibendum ante. Integer id magna sollicitudin, scelerisque neque vitae, tincidunt quam. Integer et aliquam sem, at tempus dui. Etiam sit amet ornare lacus, at placerat leo. Donec pharetra diam sit amet nisl dapibus suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed</div></div>

可运行示例Fiddle效果可自行测试，Firefox下测试效果如下图：

更新 #

我在另一版Fiddle中实现了预期效果，但仅支持固定像素值，不符合使用需求。

内容的提问来源于stack exchange，提问作者Flummiboy