CSS如何使包装器元素包含2个元素，其大小为1个屏幕外

Question

让我们说我想拥有一个包装器元素，该包装器元素显示一个宽度高度相同的元素，但是单击时它会滑动到它旁边的div，而该div不在屏幕上... 让我来快速画一下：

Drawing level 9000

因此，单击向右箭头会将/ scroll滑动到屏幕外元素。

这主要用于我的模态，如下所示：

<section class="modal--wrapper">
  <div class="modal">
    /* picture i drew goes here */
  </div>
</section>

modal-包装器为全屏宽度/高度100％，位置：固定，而modal为居中，最大宽度为384px（用于移动用途）

我知道如何使用getBoundingClientRect为此编写逻辑，我只是​​不知道如何使第二个元素不在屏幕上。

<section class="user">
  <section class="user__account">/* ... */</section>

  <section class="user__settings">/* ... */</section>
</section>

用户帐户将是我提取的内容，而用户设置将是屏幕外的元素。

我尝试将“用户”类的显示设置为：弯曲和溢出：隐藏，但是两个窗口彼此相邻，完全可见。即使我将帐户和设置宽度设置为384px（包装器的宽度），它们也会彼此相邻出现。基于em的flex-basis 100％也不起作用。邓诺（Dunno）如果绝对位置会有所帮助，我想这将需要一些黑客来做到这一点。如果那是要走的路，我会失望的。只需要一个小小的帮助就可以从哪里开始。我试图像这样放置em，但是它只是不想工作：\

我以前经常创建类似这样的东西，但是对于向上和向下滚动而不是向左和向右滚动的元素……