如何在Google Chrome浏览器的可滚动容器中实现元素的反向堆叠？

Question

我已经通过下面的代码实现了我想要的效果，但是它似乎仅在Firefox和Edge中有效。在Chrome中，元素按需要堆叠，但是没有水平滚动条，因此最右边的项目被隐藏，用户无法访问。

如您所见，页眉和页脚保持不变，而my-app元素是唯一可滚动的部分。左侧的项目显示在右侧的项目上方，而一直到右侧的项目都可以通过滚动获得。

body {
  margin: 0;
  height: 100vh;
}

my-app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

header, footer {
  height: 25px;
  background-color: black;
  color:white;
}

main {
  display: flex;
  flex-direction: row-reverse;
  flex-grow: 1;
  justify-content: flex-end;
  margin: 0;
  overflow-x: auto;
  width: 100vw;
}

.card {
  --card-height: 200px;
  --card-width: 250px;

  align-items: center;
  background: linear-gradient(rgba(179, 156, 95, 1), rgba(150, 117, 24, 1));
  border-radius: 5px;
  box-shadow: 1.5rem 0 2rem #222;
  color: #000;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  justify-content: center;
  min-width: var(--card-width);
  position: relative;
  text-align: center;
  transition: all .15s ease-in-out;
  transition: margin .3s ease-in-out;
  width: var(--card-width);
}

.card:not(:last-of-type) {
    margin-left: calc(var(--card-width) * -.5);
}

.card:hover:not(:last-of-type) {
    margin-left: 0;
}

<my-app>
  <header>Header</header>
  <main>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
    <div class="card">11</div>
    <div class="card">12</div>
    <div class="card">13</div>
    <div class="card">14</div>
    <div class="card">15</div>
  </main>
  <footer>Footer</footer>
</my-app>

如果我将应用于main的css更改为：

main {
  ...
  flex-direction: row;
  ...
  justify-content: flex-start;
  ...
}

然后会出现滚动条，但物品堆叠不正确（右侧的物品与左侧的物品重叠）。

[如果我再走一步并将direction: rtl;也添加到main样式，则布局将按预期工作，但默认滚动位置始终在屏幕的右侧（这很有意义）。我可能可以保留此代码，并添加一些JavaScript来更改页面加载时的滚动位置，但这些操作似乎都非常hacky。是否有更好的方法来实现我正在寻找的布局，该布局将在Chrome，Firefox和Edge中运行？

Answer 1

看起来像一个额外的包装器解决了您的问题：

body {
  margin: 0;
  height: 100vh;
}

my-app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

header,
footer {
  height: 25px;
  background-color: black;
  color: white;
}

main {
  flex-grow: 1;
  margin: 0;
  overflow-x: auto;
  width: 100vw;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.card {
  --card-height: 200px;
  --card-width: 250px;
  align-items: center;
  background: linear-gradient(rgba(179, 156, 95, 1), rgba(150, 117, 24, 1));
  border-radius: 5px;
  box-shadow: 1.5rem 0 2rem #222;
  color: #000;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  justify-content: center;
  min-width: var(--card-width);
  position: relative;
  text-align: center;
  transition: all .15s ease-in-out;
  transition: margin .3s ease-in-out;
  width: var(--card-width);
}

.card:not(:last-of-type) {
  margin-left: calc(var(--card-width) * -.5);
}

.card:hover:not(:last-of-type) {
  margin-left: 0;
}

<my-app>
  <header>Header</header>
  <main>
    <div class="wrapper">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
      <div class="card">6</div>
      <div class="card">7</div>
      <div class="card">8</div>
      <div class="card">9</div>
      <div class="card">10</div>
      <div class="card">11</div>
      <div class="card">12</div>
      <div class="card">13</div>
      <div class="card">14</div>
      <div class="card">15</div>
    </div>
  </main>
  <footer>Footer</footer>
</my-app>