The code snippet provided creates the desired effect, but unfortunately, it only seems to function properly in Firefox and Edge. In Chrome, while the elements are stacked correctly, there is no horizontal scroll bar, making the rightmost items hidden and inaccessible to users.
As demonstrated, the header and footer remain fixed while the my-app element is scrollable. The items on the left display above those on the right, with all items reachable through scrolling.
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;
...<my-app>
<header>Header</header>
<main>
<div class="card">1</div>
<div class="card">2</div>
...
<div class="card">15</div>
</main>
<footer>Footer</footer>
</my-app>When changing the CSS properties of main to:
main {
...
flex-direction: row;
...
justify-content: flex-start;
...
}
The scrollbar appears, but the items are not stacked correctly (those on the right overlay those on the left).
If adding direction: rtl; to the main style, the layout functions as intended, yet the default scroll position starts at the right side of the screen. While this can be adjusted with JavaScript, it may seem like a hacky solution. Is there a better way to achieve the desired layout that works seamlessly across Chrome, Firefox, and Edge browsers?