I am trying to create a card deck that contains multiple cards displayed side by side, even on mobile devices, with both horizontal and vertical scrolling capabilities.
The parent container of the cards has a fixed height, however, I am struggling to adjust the size of the cards (specifically the borders) to fit the content within each card, currently causing them to extend beyond the parent container.
Here is a link to my current code snippet: https://jsfiddle.net/axel50397/eLrkasb0/
.h-scrollable {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.h-scrollable > .card {
flex: 0 0 auto;
width: 250px;
}